CODEWITHSUNDEEP
csshtmlcss-position
Joe Pigott
Joe Pigott

Reputation: 8459

position: fixed overlapping page

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>

Upvotes: 3

Views: 16459

Answers (3)

SaturnsEye
SaturnsEye

Reputation: 6499

It's because you have two positions. Remove one and make it:

#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: fixed;
}

Upvotes: -1

Mr. B.
Mr. B.

Reputation: 8697

You need to add another div to wrap the content with a margin-top.

DEMO

http://jsfiddle.net/sZaxc/8/

HTML

<div id='main'>
    <!-- inputs etc -->
</div>

CSS

#main {
    margin-top: 50px;
}

I also added a z-indexand top: 0to your #top-div - just in case.

Upvotes: 3

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

Wrap your content with div and give it the margin-top to the same height as your fixed content.

SEE DEMO HERE

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;
}

Upvotes: 9

Related Questions