Overlapping divs having position fixed and relative - html

Question

I have a div named container that contains multiple child div elements. Of these child divs, the top most one, named top_bar, has position: fixed while the remaining others have position: relative. The trouble is that divs that have relative positioning are overlapping with the div with fixed positioning. The jsfiddle outlining the issue. I was able to correct this by adding top:150px but this feels more like a hack. Is there a better way to do this?

Answer 1

If you want to this dynamic so you can check below mentioned link:
https://jsfiddle.net/06vzbuf0/2/
I've used jQuery to resolve this issue.

Answer 2

Add padding-top:120px; to container and top:0; to top_bar to that below div is not overlay to 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 {
border-radius:5px;
-moz-border-radius:5px;
-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 {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
width: 40px;
font: 14px/100% "Century Gothic", Arial, Helvetica, sans-serif;
/* padding: .5em 2em .55em; */
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
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>

Answer 3

Try position: sticky. Positions static & relative keep their natural space in the flow of the document, while the absolute & fixed don’t — their space is removed and they have a floating behavior.
position: sticky;