Question

我总是看到这样的代码：

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

我认为位置相对用于使用左上角和右下角的CSS属性（px）相对于其父元素容纳div。单独使用它有什么意义，如下例所示？其他哪些属性受位置相对影响？

Answer 1

子元素位置 会受此影响。

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

第一个例子

<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

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

相对DIVS的位置

2 个答案: