Topmost 'fixed' position div moving with non position div

Question

Consider the following code:

div {
    width:100%;
    height:64px;
    border:1px solid #000;
}

.top-fixed {
    position:fixed;
}

.middle-fixed {
    position:fixed;
    top:64px;
}

.bottom {
    margin-top:128px; #64+64
}

<html>
    <head></head>
    <body>
        <div class="top-fixed">Top Fixed</div>
        <div class="middle-fixed">Middle Fixed</div>
        <div class="bottom">Bottom</div>
    </body>
</html>

For div.bottom, I am using margin-top property so that it does not overlap with the top-most div. But it also brings div.top-fixed 'down' with itself (see the fiddle).

How can I rectify it? One way is possibly using padding-top property for div.bottom instead of margin-top, but that does not sound elegant.

Here's a similar question that answers WHY: http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers — steviesh, Jul 31 '16 at 03:52

syed mohsin · Answer 1 · 2016-11-07T07:10:31.077

4

You missed top 0 in the top-fixed div.

Try this

.top-fixed {
  position:fixed;
  top:0;
}

edited Nov 07 '16 at 07:10

answered Dec 22 '12 at 08:24

syed mohsin

2,948
2
23
47

score 1 · Accepted Answer · answered Dec 22 '12 at 08:23

1

Change the CSS of the your .bottom element to:

.bottom {
    position:relative;
    top:128px; #64+64
}

answered Dec 22 '12 at 08:23

axel.michel

5,764
1
15
25

score 0 · Answer 3 · answered Dec 22 '12 at 08:31

0

Add top:0; to your .top-fixed class.

answered Dec 22 '12 at 08:31

Amin Mousavi

668
1
8
17

Topmost 'fixed' position div moving with non position div

3 Answers3

Linked