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.

回答1:

Change the CSS of the your .bottom element to:

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

回答2:

You missed top 0 in the top-fixed div.

Try this

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

回答3:

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

来源：https://stackoverflow.com/questions/14001219/topmost-fixed-position-div-moving-with-non-position-div

标签

css

html

css-position

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!