position: fixed overlapping page

Joe Pigott

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>
Vikas Ghodke

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

fixed position header overlapping

From Dev

Position fixed overlapping issue?

From Dev

position relative overlapping position fixed

From Dev

position fixed element is overlapping into footer

From Dev

DIV Position Fixed, inner content overlapping

From Dev

Header in fixed position is overlapping with container div when the window is reduced in width

From Dev

How to scroll div with page without position: fixed?

From Dev

Get all elements with `position:fixed` in an HTML page?

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

jQuery Mobile Dialog Page - Fixed Position Header

From Dev

position: fixed; breaking my web page

From Dev

Position fixed element within fixed element relative to page

From Dev

Position fixed acting like position relative ( scrolling with page )

From Dev

position:fixed navigation header overlapping browser scroll bar when using overflow-x

From Dev

Overlapping dynamic fixed header

From Dev

Fixed notifications overlapping

From Dev

Avoiding overlapping with fixed element

From Dev

Set multiple div elements to "position: fixed" at the bottom of a page

From Dev

Prevent page scrolling to top upon adding fixed position

From Dev

Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

From Dev

Position fixed element in bottom right corner of page with CSS3

From Dev

Header Div position fixed on top of page but on load show a div on top of it

From Dev

Fixed position div causes page to be truncated in less common mobile browsers

From Dev

how to set up a fixed position image in a one page layout

From Dev

Why section of web page overlaps the header even if the position of header is fixed

From Dev

How to fix the position of a picture on a fixed page, in MS Word 2013?

From Dev

Need a CSS solution to stay top left with page scrolling (not position:fixed)

From Dev

Div overlapping and collision position

Related Related

  1. 1

    fixed position header overlapping

  2. 2

    Position fixed overlapping issue?

  3. 3

    position relative overlapping position fixed

  4. 4

    position fixed element is overlapping into footer

  5. 5

    DIV Position Fixed, inner content overlapping

  6. 6

    Header in fixed position is overlapping with container div when the window is reduced in width

  7. 7

    How to scroll div with page without position: fixed?

  8. 8

    Get all elements with `position:fixed` in an HTML page?

  9. 9

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  10. 10

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  11. 11

    jQuery Mobile Dialog Page - Fixed Position Header

  12. 12

    position: fixed; breaking my web page

  13. 13

    Position fixed element within fixed element relative to page

  14. 14

    Position fixed acting like position relative ( scrolling with page )

  15. 15

    position:fixed navigation header overlapping browser scroll bar when using overflow-x

  16. 16

    Overlapping dynamic fixed header

  17. 17

    Fixed notifications overlapping

  18. 18

    Avoiding overlapping with fixed element

  19. 19

    Set multiple div elements to "position: fixed" at the bottom of a page

  20. 20

    Prevent page scrolling to top upon adding fixed position

  21. 21

    Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

  22. 22

    Position fixed element in bottom right corner of page with CSS3

  23. 23

    Header Div position fixed on top of page but on load show a div on top of it

  24. 24

    Fixed position div causes page to be truncated in less common mobile browsers

  25. 25

    how to set up a fixed position image in a one page layout

  26. 26

    Why section of web page overlaps the header even if the position of header is fixed

  27. 27

    How to fix the position of a picture on a fixed page, in MS Word 2013?

  28. 28

    Need a CSS solution to stay top left with page scrolling (not position:fixed)

  29. 29

    Div overlapping and collision position

HotTag

Archive