Блог

Я изучаю css, и мне интересно, почему мы устанавливаем position: relative, даже если мы не устанавливаем конкретное местоположение, такое как left: 20px , top: 10px . Ниже приведен пример кода css.

 #home #header {
    position: relative;
    width: 822px;
    height: 152px;
    margin: 0 19px;
    padding: 0;
    overflow: hidden;
}

#header {
    position: relative;
    width: 822px;
    height: 152px;
    margin: 0 19px;
    padding: 0;
    overflow: hidden;
    background: url(img/bg-content-wrap-top-int.png) no-repeat center bottom;
}
  

Обычно одна из этих 3 причин:

• Чтобы повлиять на то, как элементы укладываются в стопку (это меняется, когда вы размещаете элемент с определенным z-index значением или без него). Смотрите https://developer.mozilla.org/en/understanding_css_z-index
• Как упоминал Никлас Рингдал, position:absolute элементы внутри будут относительными к родительскому элементу, если родительский элемент является position:relative . Смотрите http://css-tricks.com/absolute-positioning-inside-relative-positioning /
• Чтобы убедиться, что какое-то другое свойство применяется по желанию, или исправить сбой (как «хак»). Это делается по нескольким причинам, связанным с IE.

В большинстве ситуаций он используется для установки 0,0 позиции для любого дочернего элемента, который расположен absolute внутри #header .

Обычно, если вы делаете это:

 <div id="header">
    <div id="fos">hehe</div>
</div>
  

и вы используете этот css:

 #fos {
    position: absolute;
    top: 10px;
    left: 10px;
}
  

ваш #fos элемент будет располагаться 10,10 начиная с верхнего левого угла страницы. Однако, если вы поставите position: relative; on #header , #fos будет располагаться 10,10 из верхнего левого угла #header .

Это также произошло бы, если бы #header было что-то другое, чем position: static (значение по умолчанию для position ), но обычно relative используется, потому что это сохраняет элемент в потоке документов. Итак, когда вы устанавливаете его, не задавая никакого конкретного местоположения, оно останется таким, как есть, но 0,0 позиция будет изменена.

Я создал для вас простую демонстрацию jsFiddle.

(это также используется в некоторых других случаях, как хорошо описал @rhyaniwyn, я просто хотел объяснить это немного дольше, это очень мощный метод)

Это не обязательно, но это полезно сделать, если следует использовать дочерние элементы position:absolute , поскольку их относительное положение будет вычисляться относительно ближайшего родительского элемента с position:relative