我有一個名爲container的div，其中包含多個子元素div。在這些孩子div s中，最上面的一個，名爲top_bar，有position: fixed，而其餘的其他人有position: relative。麻煩的是，具有相對定位的div與固定定位的div重疊。 jsfiddle概述了這個問題。我可以通過加入top:150px來解決這個問題，但這種感覺更像是一種黑客攻擊。有一個更好的方法嗎？具有固定位置和相對位置的重疊格子
將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="🔎">
</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>
這不是破解：當你修復一個元素的位置時，它會被有效地從文檔佈局中取出，並且不會影響其他元素（靜態或相對）的位置。當涉及從流動中移除時，它的行爲與位置類似：絕對。 – Terry
我之所以稱它爲黑客，是因爲我們可以說在某些情況下，固定條的高度可能會增加，重疊會再次發生。我正在尋找一個動態的解決方案，可以處理這些細節。 –
在這種情況下，您將不得不使用JS來規避您的問題：（1）使用JS來計算固定導航欄的總高度，然後將其應用爲頂部填充（即「頂部填充」），或基本位置「頂部」，到文檔的內容包裝。或者，（2）實際上是創建一個固定導航副本，一個靜態/相對定位，另一個固定定位和隱藏。我認爲這個實現有點複雜，但是，它的好處是它爲你的導航欄保留了空間而不需要重新計算高度。 – Terry