Положение относительно DIVS

Question

Я всегда вижу такой код:

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

Я думал, что относительное положение используется для размещения элемента div относительно его родительского элемента с использованием CSS-свойств слева направо вверх и вниз (px). Какой смысл использовать его один, как в примере ниже? На какие другие свойства влияет относительное положение?

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

Я полагаю, что это делает это относительно элемента тела, поэтому применяя "width: 100%" относительно всей ширины тела.