Überlappende divs mit fester und relativer Position

Question

Ich habe eine div namens container, die mehrere untergeordnete Elemente div enthält. Von diesen Kindern hat das div s, das oberste, top_bar, position: fixed, während die restlichen anderen position: relative haben. Das Problem ist, dass div s, die relative Positionierung haben, mit dem div bei fester Positionierung überlappen. Das jsfiddle umreißt das Problem. Ich konnte dies korrigieren, indem ich top:150px hinzufüge, aber das fühlt sich mehr wie ein Hack an. Gibt es einen besseren Weg, dies zu tun?

Answer 1

hinzufügen padding-top:120px; zu container und top:0; zu top_bar zu, dass unter div Overlay ist nicht auf 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

Wenn Sie zu diesem dynamischen wollen, so dass Sie unten genannten Link überprüfen:

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

I jQuery verwendet haben, dieses Problem zu lösen.