浮动div定位
浮动div定位
提问于 2011-03-23 08:37:37
我需要一个浮动矩形(100%的宽度，100px的高度)，以显示准确的20px以上的页面底部。我该怎么做呢？
下面的代码在浏览器窗口的底部显示矩形，而不是页面-因此，如果页面的高度超过屏幕可以容纳的高度，矩形将显示在页面中间的某个位置。
<div style="z-index: 1; position: absolute; right: 0px; bottom: 20px; background-color: #000000; width: 100%; height: 100px; padding: 0px; color: white; "> </div> 回答 2
Stack Overflow用户
回答已采纳
发布于 2011-03-23 08:41:39
将position: relative;添加到矩形div的父级。这将从父元素的底部定位div 20px。
Stack Overflow用户
发布于 2011-03-23 08:45:58
- 按照@Laxman13的建议，您需要将
position: relative添加到“浮动矩形”的父级中。本例中的相关父对象恰好是bodyelement. - Read this / this / this，以帮助理解
position属性。
body {
position: relative
}
#floatingRectangle {
z-index: 1;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
height: 100px;
background-color: #000;
color: white;
padding: 0;
}<div id="floatingRectangle">
<h2>Hello</h2>
</div>
Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />Long content<br />
Live Demo
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5399581
复制相关文章
相似问题
腾讯云开发者
