Topmost 'fixed' position div moving with n

2019-05-24 06:09发布

站内文章 / HTML/CSS
47 0 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.

回答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.



标签： css html css-position
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~