本文介绍了最顶端的“固定”位置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移动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!