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>
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments