Question

我正在使用Firefox 25.0.1。我试图理解，为什么div块由

定义

<div style="position: absolute; margin: auto; width: 240px; height: 75px; top:0; left:0;right:0; bottom:0;">
    some content
</div>

将位于浏览器窗口的中心。但是以下

<div style="position: absolute; margin: auto; width: 240px; height: 75px;">
    some content
</div>

将位于浏览器窗口的左上角。以下两个div块

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0; right:0;">
    some content
</div>

和

<div style="position: absolute; margin: 0 auto; width: 240px; height: 75px;">
    some content
</div>

只有中心水平对齐，但

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0;">
    some content
</div>

位于浏览器的左上角。我很困惑，我不明白，相应的HTML代码是如何解析的。请解释一下它是如何工作的。

Answer 1

您将在使用position:relative;

的父元素的元素上使用position绝对值

使用left，right，top或bottom将该元素定位到父元素的许多像素。

如果你有这个例子，它会将内部div 10px从父级顶部定位，0px从左侧定位

<div style="position:relative">
    <div style="position: absolute; width: 240px; height: 75px; left: 0; top:10px">
        some content
    </div>
</div>

理解在html标记中解析样式

1 个答案: