WeaklyTyped WeaklyTyped - 4 months ago 8
CSS Question

Topmost 'fixed' position div moving with non position div

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.

Answer

Change the CSS of the your .bottom element to:

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