Question

我期待以下将在浏览器窗口坐标系中的位置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”。只是一个错误。

Answer 1

position: absolute;将您的元素从正常流程中移除。由于你将其指定为0，因此它就是它的位置。

Answer 2

你内心div的位置是absolute。尝试relative，或根本不设置该属性。

Answer 3

嗯，这是因为你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>

Answer 4

因为红色方块上有position: absolute;。

您可以将其取出并获取this，或设置left属性并获取this。

另外，作为附注，有些人建议（包括我自己）当值为0时不要将测量单位附加到CSS属性。零的东西仍为零，所以0px，0em等不会没关系，它总是评估为0。

Answer 5

左上方和下方的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>

Answer 6

这是我自己的错。我希望为内部DIV制作“top：0px”，但是写了“right：0px”。当元素向下移动但不正确时，我认为顶部填充的处理方式与左边不同。

为什么左边填充不起作用？

6 个答案: