我期待下面将放置内部(红色)正方形在位置50,50在浏览器窗口坐标框架。但事实并非如此。为什么?
<body>
<div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;">
<div style="position: absolute; left: 0px; right: 0px; width: 64px; height: 64px; background-color: red">
</div>
</div>
</body>
对不起
我希望为内部DIV制作"top:0px",但写了"right:0px"。只是个错误。
position: absolute;
将您的元素从正常流程中取出。因为你指定它的左值为0,所以它就在这里
你内心的div
的位置是absolute
。尝试relative
,或者不设置该属性。
好吧,这是因为你的position: absolute
有left: 0;
你可能想要这样的:
<body>
<div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;">
<div style="position: absolute; left: 50px; right: 0px; width: 64px; height: 64px; background-color: red">
</div>
</div>
</body>
因为红色方块上的position: absolute;
。
你可以把它拿出来得到这个,或者设置left
属性得到这个。
另外,作为旁注,有些人建议(包括我自己)当值为0时不要将度量单位附加到CSS属性上。0仍然是0,所以0px, 0em等等都无所谓,它的值总是0
左右上下CSS的意思是"距离"。它不应该像你现在这样使用它。
这里有一个更好的例子:http://jsfiddle.net/xAuLJ/
<body>
<div style="position: fixed; width:100%; height:100%; background-color: yellow;">
<div style="position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin-top:-32px; margin-left:-32px; background-color: red">
</div>
</div>
</body>
这是我自己的错。我希望为内部DIV制作"top:0px",但写了"right:0px"。当元素向下移动而不是向右移动时,我决定顶部填充处理与左侧不同。