具有固定位置和相對位置的重疊格子

Question

我有一個名爲container的div，其中包含多個子元素div。在這些孩子div s中，最上面的一個，名爲top_bar，有position: fixed，而其餘的其他人有position: relative。麻煩的是，具有相對定位的div與固定定位的div重疊。 jsfiddle概述了這個問題。我可以通過加入top:150px來解決這個問題，但這種感覺更像是一種黑客攻擊。有一個更好的方法嗎？

Answer 1

將padding-top:120px;增加到container和top:0;到top_bar到下面的div不疊加到topbar。

html, body { 
 
    height:100%; 
 
} 
 

 
.container { 
 
    text-align: center; 
 
    width:100%; 
 
    margin:0%; 
 
    padding:120px 0 0; 
 
    color: dodgerblue; 
 
} 
 

 
.top_bar{ 
 
    box-shadow: 0px 5px 5px #DDD; 
 
    position: fixed; 
 
    z-index: 10000; 
 
    opacity: .95; 
 
    background-color:#f9f9f9; 
 
    width:100%; 
 
    top:0; 
 
} 
 

 
.mugoogle{ 
 
    font-size: 22px; 
 
    font-family: Arial; 
 
    margin: 10px auto; 
 
} 
 

 
.mugoogle a, .tab_results a { 
 
    text-decoration:none; 
 
    -webkit-transition:all .3s ease; 
 
    -ms-transition:all .3s ease; 
 
    transition:all .3s ease; 
 
} 
 

 
.mugoogle a:hover{ 
 
    color: #aaa; 
 
} 
 

 
.tab_results a:hover { 
 
    text-decoration:underline; 
 
    color: #000 
 
} 
 

 

 
.textbox{ 
 
    margin: 0px auto; 
 
    height:30px; 
 
    width:60%; 
 
} 
 

 

 
.rounded { 
 
\t border-radius:5px; 
 
\t -moz-border-radius:5px; 
 
\t -webkit-border-radius:5px; 
 
} 
 

 
/* h4{ 
 
    -moz-transition: all .5s; 
 
    -webkit-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 
*/ 
 
input[type="submit"] { 
 
height: 30px; 
 
} 
 

 
input[type="text"] { 
 
    border: 1px solid #ccc; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    -moz-transition: all .5s; 
 
    -webkit-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 

 
input[type="text"]:focus { 
 
    border-color: #66afe9; 
 
    outline: 0; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
 
} 
 

 
.button { 
 
\t display: inline-block; 
 
\t outline: none; 
 
\t cursor: pointer; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
    width: 40px; 
 
\t font: 14px/100% "Century Gothic", Arial, Helvetica, sans-serif; 
 
\t /* padding: .5em 2em .55em; */ 
 
\t text-shadow: 0 1px 1px rgba(0,0,0,.3); 
 
\t -webkit-border-radius: .5em; 
 
\t -moz-border-radius: .5em; 
 
\t border-radius: .5em; 
 
\t -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
 
\t -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
 
\t box-shadow: 0 1px 2px rgba(0,0,0,.2); 
 
} 
 
.button:hover { 
 
\t text-decoration: none; 
 
} 
 
.button:active { 
 
\t position: relative; 
 
\t top: 1px; 
 
} 
 

 
.blue { 
 
\t color: #d9eef7; 
 
\t border: solid 1px #0076a3; 
 
\t background: #0095cd; 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
 
\t background: -moz-linear-gradient(top, #00adee, #0078a5); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 
 
} 
 
.blue:hover { 
 
\t background: #007ead; 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
 
\t background: -moz-linear-gradient(top, #0095cc, #00678e); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 
 
} 
 
.blue:active { 
 
\t color: #80bed6; 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
 
\t background: -moz-linear-gradient(top, #0078a5, #00adee); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 
 
} 
 

 
.project_data{ 
 
    text-align:left; 
 
    width: 1000px; 
 
    position:relative; 
 
    padding: 5px; 
 
    word-wrap:break-word; 
 
    margin:0 auto; 
 
    font-family: Calibri; 
 
    font-size: 18px; 
 
    color: #555; 
 
}

<div class = "container"> 
 
<div class = "top_bar"> 
 
<h4 class = 'mugoogle'> 
 
<a href = '/search/'> 
 
muGoogle 
 
</a> 
 
</h4> 
 
<form class="form-wrapper" method = "GET" action = "{% url 'doc_scorer'%}"> 
 
    <input type="text" name = 'query' class="textbox rounded" placeholder="Search docs related to..." required> 
 
    <input type="submit" class="button blue" value="&#128270;"> 
 
</form> 
 
<br> 
 
</div> 
 
<br> 
 

 
<div class = 'project_data project_name'> 
 
<strong>Project name: </strong> 
 
</div> 
 

 
<div class = 'project_data scq_title'> 
 
<strong>SGQ: </strong> 
 
</div> 
 

 
<div class = 'project_data situation'> 
 
<strong>Situation: </strong> 
 
</div> 
 

 
<div class = 'project_data future_state'> 
 
<strong>Future State: </strong> 
 
</div> 
 

 
<div class = 'project_data complications'> 
 
<strong>Complications: </strong> 
 
</div> 
 

 
<div class = 'project_data questions'> 
 
<strong>Questions: </strong> 
 
</div> 
 

 
<div class = 'project_data data'> 
 
<strong>Data: </strong> 
 
</div> 
 

 
<div class = 'project_data name'> 
 
<strong>Name: </strong> 
 
</div> 
 
<br> 
 
<br> 
 
</div>

Answer 2

如果你想這個動態的，所以您可以檢查下面提到鏈接：

https://jsfiddle.net/06vzbuf0/2/

我用jQuery來解決這個問題。