最顶端的“固定”位置div与非位置div移动 [英] Topmost 'fixed' position div moving with non position div
本文介绍了最顶端的“固定”位置div与非位置div移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请考虑下面的代码：
div {width：100％;高度：64PX; border：1px solid＃000;}。top-fixed {position：fixed;}。middle-fixed {position：fixed; top：64px;}。bottom {margin-top：128px; ＃64 + 64}
< html> < HEAD>< /头> <身体GT; < div class =top-fixed>顶部固定< / div> < div class =middle-fixed>中间固定< / div> < div class =bottom>底部< / div> < / body>< / html>
底部，我使用margin-top属性，以便它不会与最顶级的div重叠。但它也带来了div.top-fixed'down'（参见小提琴）。
我该如何纠正它？一种方法可能是使用padding-top属性来代替div.bottom而不是margin-top，但这听起来不太好看。 解决方案
将您的.bottom元素的CSS更改为：
.bottom {
position：relative;
top：128px; ＃64 + 64
}
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.
解决方案
Change the CSS of the your .bottom element to:
.bottom {
position:relative;
top:128px; #64+64
}
这篇关于最顶端的“固定”位置div与非位置div移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
