我需要一个浮动矩形（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>
- 根据@Laxman13的建议，您需要添加
position: relative到“浮动矩形”的父级。在这种情况下，相关的父母恰好是body元素。
-
读这个 http://css-tricks.com/absolute-positioning-inside-relative-positioning/ / this http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ / this https://developer.mozilla.org/en/CSS/position帮助理解
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 />
现场演示 http://jsfiddle.net/thirtydot/mvCUH/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
