css - 位置相对 DIVS

Question

我总是看到这样的代码：

#container {
    background:#000000 none repeat scroll 0 0;
    display:block;
    overflow:hidden;
    position:relative;
    width:100%;
}

我认为相对位置用于使用 CSS 属性 left right top and bottom (px) 相对于其父元素容纳 div。像下面的例子一样单独使用它有什么意义？其他哪些属性受到相对位置的影响？

Answer 1

子元素位置会受此影响。

在将父元素位置设置为相对位置后，当我们尝试将子元素位置设置为绝对位置时，它将仅相对于父元素绝对放置，而不是相对于文档。

第一个例子

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        position:relative;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

第二个例子

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

试着检查上面的两个例子，你会发现不同。

Answer 2

我相信这使它相对于身体元素，因此相对于身体的整个宽度应用“宽度：100％”。