为什么左填充不工作



我期待下面将放置内部(红色)正方形在位置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: absoluteleft: 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"。当元素向下移动而不是向右移动时,我决定顶部填充处理与左侧不同。

相关内容

  • 没有找到相关文章

最新更新