Абсолютное позиционирование внутри абсолютного положения


89

У меня 3 divэлемента.

1-й divбольше (обертка) и имеетposition:relative;

2-й divпозиционируется абсолютно по отношению к 1-му divотносительному позиционированию (и входит в 1-й div)

3-й divсодержится во 2-м divи также имеет абсолютное позиционирование.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Почему 3-я divпозиция абсолютна по отношению ко второй div(которая также является абсолютной по отношению к 1-й div), а не к 1-й div, имеющей относительное положение?

Потому что третий div- это абсолютное позиционирование по отношению к абсолютному позиционированию второго div.


Это действительно то, что я ищу, и эти ответы на ваши вопросы открыли мне глаза: \.
Бенджамин

absolute: элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка
Освальдо Сапата

Ответы:


94

Потому что position: absoluteсбрасывает относительное положение для детей точно так position: relativeже.

Обойти это невозможно - если вы хотите, чтобы третий divбыл абсолютно позиционирован относительно первого, вам придется сделать его дочерним по отношению к первому.


Итак, в основном абсолютное положение становится относительным положением для его ребенка с абсолютным позиционированием?
пуфос

@pufos вроде. 0px / 0pxПоложение для детей получает сбрасыватьсяposition: absolute
Пекка

24
@pufos Я думаю, вы немного запутались. position:relativeозначает, что элемент будет позиционироваться (используя верхнее, правое, нижнее левое положение) относительно своего текущего положения. position: absoluteозначает, что он будет расположен относительно окна браузера или первого родителя с помощью position: absoluteили position: relative.
seler 08

Вы можете поделиться ссылкой на это в Интернете? Потому что я ничего не нашел ... И ... Большое спасибо
pufos

2
@pufos самая основная ссылка здесь: w3.org/TR/CSS2/visuren.html#choose-position
Пекка

27

Оба position:relativeи position:absoluteустанавливают содержащие элементы в качестве предков позиционирования.

Если вам нужно, чтобы div 3 располагался на основе div 1, сделайте его прямым потомком div 1.

Обратите внимание, что это position: relativeозначает, что элемент расположен относительно своего естественного положения, и position: absoluteозначает, что элемент расположен относительно своего первого position:relativeили position:absoluteпредка. .


Я хотел, чтобы третий div был абсолютно позиционирован по отношению к абсолютному позиционированному div, но я не знал, является ли он стандартным (кроссбраузер) .. и я не мог найти спецификации в Интернете ... Большое спасибо
pufos

Абсолютное позиционирование в этом разделе: w3.org/TR/CSS21/visuren.html#comp-abspos
Майк Танниклифф,

@MikeTunnicliffe absolute означает, что элемент расположен относительно его первой позиции: также исправлено
Trần Kim D

15

Позиция статическая: статическая позиция - это способ отображения элемента по умолчанию в обычном потоке вашего HTML-файла, если позиция не указана вообще.

Важно: top, right, bottomи leftсвойства не влияет на то Статичаском позиционируемый элемент.

Относительное положение : позиционирование элемента с относительным значением сохраняет элемент (и занимаемое им пространство) в обычном потоке вашего HTML-файла.

Затем вы можете переместить элемент на некоторую величину , используя свойства left, right, topиbottom . Однако это может привести к тому, что элемент будет перекрывать другие элементы, находящиеся на странице, что может быть, а может и не быть желаемым эффектом.

Относительно расположенный элемент может двигаться со своего места, но занимаемое им пространство остается.

Абсолютное положение: применение значения абсолютного положения к элементу удаляет его из обычного потока. При перемещении абсолютного позиционированного элемента, его опорная точка является вершина / слева от его ближайшего содержащего элемента , который имеет позицию объявила, кроме статического также называют его ближайшим контекстом позиционирования. Таким образом, если не существует содержащего элемента с положением, отличным от static, то он будет размещен из верхнего левого угла элемента body.

В вашем случае ближайший к третьему контейнеру контейнер - второй.


4

Еще один уточняющий ответ.

Ваш текущий сценарий таков:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

И вы как бы боретесь с этим.

Если вы можете изменить HTML, просто сделайте следующее:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

2
my-wrapper, вероятно, должен быть .my-wrapper
jdavid.net

Этот подход потрясающий, я до сих пор не понимаю, почему он решил мою проблему. Моя проблема в том, что мой третий элемент не может быть дочерним по отношению к первому по какой-то другой причине.
windmaomao

2

Причина, по которой третий divэлемент абсолютно позиционируется по отношению ко второму divэлементу, заключается в том, что, как объясняет здесь спецификация CSS , «родительский» элемент (точнее говоря: содержащий блок) абсолютно позиционированного элемента не обязательно является его непосредственным родительским элементом, но скорее его непосредственно позиционируемый элемент, то есть любой элемент, позиция которого установлена ​​на что угодно, кроме, staticнапример,position: relative/absolute/fixed/sticky;

Следовательно, когда это возможно в вашем коде, если вы хотите, чтобы 3-й divэлемент был абсолютно позиционирован относительно 1-го, divвы должны сделать свой 2-й divэлемент, position: static;который является его значением по умолчанию (или просто удалите любое position: ...объявление в наборе правил вашего 2-го divэлемента) .

Выше будет сделать первый содержащий блок 3 - го абсолютно позиционирован , не обращая внимания на 2 - й для этой цели позиционирования.divdivdiv

Надеюсь, это поможет.


0

На случай, если кто-то все еще ищет ответ на этот вопрос.

Мне удалось добиться этого результата, добавив clear: both;стиль к первому абсолютно позиционированному div, который сбросил дочерний элемент и позволил ему использовать собственное absoluteпозиционирование.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.