Home/ Questions/Q 9030327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T07:27:46+00:00

Consider the following code: div { width:100%; height:64px; border:1px solid #000; } .top-fixed {

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the CSS of the your .bottom element to:

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