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

时间:2011-12-24 17:05:05

标签: css html styles

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

6 个答案:

答案 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”。当元素向下移动但不正确时,我认为顶部填充的处理方式与左边不同。