1

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?

Improve this question
4
  • 1
    It is not a hack: when you fix the position of an element, it is effectively taken out of the document layout, and will not influence the position of other elements (static or relative). When it comes to removal from flow, it behaves similarly to position: absolute. Commented Mar 22, 2017 at 6:42
  • The reason why I was inclined to call it a hack was because lets say in some case the height of the fixed bar may increase and the overlapping will occur again. I was looking for a dynamic solution, which can take care of these details. Commented Mar 22, 2017 at 6:48
  • 1
    In this case, you will have to use JS to circumvent your issue: (1) use JS to calculate the total height of the fixed navigation bar, and then apply it as either a top padding (i.e. padding-top), or cardinal position top, to the content wrapper of the document. Alternatively, (2) is to actually create a copy of your fixed nav, one which is static/relative positioned, while the other is fixed positioned and hidden. I consider this implementation a bit more complicated, tho, but the advantage is that it reserves the space for your nav bar without needing to recompute the height. Commented Mar 22, 2017 at 6:57
  • 1
    I agree with @Terry. The moment you put a div into a fixed/absolute position, it is now a floating element. And in order for your document to adjust appropriately to this element is to define it's properties explicitly(height). To address this dynamically, you have to inject JS into the scene to do the work for you. Commented Mar 22, 2017 at 6:58

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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="&#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>

Improve this answer

Comments

0

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;
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.