position: fixed overlapping page
15,557
Solution 1
Wrap your content with div
and give it the margin-top
to the same height as your fixed content.
HTML
<div id='top'>Kitchen List</div>
<br />
<div class="container">
<input type='text' id='input'>
<button id='click'>Add</button>
<ol></ol>
<div id='error'>Please enter a grocery item
<br />
<button id='eb'>Close</button>
</div>
</div>
CSS
.container {
margin-top: 50px;
}
Solution 2
You need to add another div to wrap the content with a margin-top
.
DEMO
HTML
<div id='main'>
<!-- inputs etc -->
</div>
CSS
#main {
margin-top: 50px;
}
I also added a z-index
and top: 0
to your #top
-div - just in case.
Author by
Joe Pigott
Updated on June 04, 2022Comments
-
Joe Pigott almost 2 years
Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (
position: relative; position: fixed
) but this doesn't let the div stay fixed.CSS (for the div):
#top { width: 100%; height: 40px; background: #96f226; text-align: center; font-size: 30px; color: #252525; position: relative; position: fixed; }
HTML (for the div):
<div id='top'>Kitchen List</div>