我期待以下将在浏览器窗口坐标系中的位置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”。只是一个错误。
答案 0 :(得分:3)
position: absolute;
将您的元素从正常流程中移除。由于你将其指定为0,因此它就是它的位置。
答案 1 :(得分:2)
你内心div
的位置是absolute
。尝试relative
,或根本不设置该属性。
答案 2 :(得分:0)
嗯,这是因为你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>
答案 3 :(得分:0)
因为红色方块上有position: absolute;
。
您可以将其取出并获取this,或设置left
属性并获取this。
另外,作为附注,有些人建议(包括我自己)当值为0时不要将测量单位附加到CSS属性。零的东西仍为零,所以0px,0em等不会没关系,它总是评估为0。
答案 4 :(得分: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>
答案 5 :(得分:0)
这是我自己的错。我希望为内部DIV制作“top:0px”,但是写了“right:0px”。当元素向下移动但不正确时,我认为顶部填充的处理方式与左边不同。