Как относительное и абсолютное позиционирование работает со встроенными элементами div?

Question

Мне нужно позиционировать div с в течение div с, и я схожу с ума.Я прочитал много документов в сети, но мне все еще не ясно, как позиционируется relative и absolute, когда встроено div s.

Кто-то подошел с помощью следующего:

Наилучший способ, который я нашел для понимания абсолютного позиционирования, заключается в том, что позиция: относительный «смотрит вниз» на дочерние элементы, а позиция: абсолютный смотрит «вверх» на родительские элементы.То есть, когда вы сообщаете HTML-элементу, что он абсолютно позиционирован, он будет смотреть «вверх» по отношению к своим родительским элементам, пока не найдет тот, для которого установлено положение: относительный, и будет позиционировать себя на основании этого.Если он не найдет его, он будет позиционироваться по умолчанию.

Это правильно для всех браузеров?Это полное объяснение?

Моя проблема в том, что у меня есть несколько div, встроенных в несколько div с.Мне нужно расположить какого-нибудь ребенка div в пределах родительского элемента div с высокой точностью (например, верх 33, слева 9).Родитель div может быть встроен в прародителя div, также с высокой точностью и т. Д. *

Как решить эту проблему для всех браузеров?Должен ли я создать супер relative родительский div, из которого вся иерархия div должна быть позиционирована как absolute?

РЕДАКТИРОВАТЬ

Из текущегоответы, у меня есть дополнительный вопрос: нужно ли явно объявить позицию relative или absolute в каждом div, чтобы позиционирование работало?Другими словами, если у div нет позиции relative или absolute, он не учитывается при вычислении позиций?

ДЛЯ ЗАПИСЕЙ

Ответ на поставленный выше вопрос - да.

Answer 1

Я собираюсь повторить следующий блок снова

Лучший способ найти абсолютное позиционирование - это позиция: относительный взгляд "вниз по течению" к дочерним элементам и позиции: абсолютный взгляд "вверх по течению "к родительским элементам.То есть, когда вы сообщаете HTML-элементу, что он абсолютно позиционирован, он будет смотреть «вверх» по отношению к своим родительским элементам, пока не найдет тот, для которого установлено положение: относительный, и будет позиционировать себя на основании этого.Если он не найдет его, он будет позиционироваться по отношению к значению по умолчанию.

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

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

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

Answer 2

Мне немного легче понять этот способ:

Если элемент position: relative, то любые настройки стиля для верхних, нижних, левых и правых позиций относятся к тому, где был бы элементв нормальном макете потока.Итак:

position: relative;
top: 10px;

толкает элемент на 10px ниже, чем он был бы в обычном HTML-макете.

Если элемент position:absolute, то он позиционируется относительно любогоближайший родительский элемент, который является position: relative или position: absolute или относительно элемента body, если ни один из родителей не соответствует этому критерию.Например, если ближайший родительский объект - это «позиция: относительный», а дочерний -:

position: absolute;
top: 10px;
left: 10px;

Тогда объект будет расположен вниз и вправо на 10 пикселей от верхнего левого угла родителя.Когда объект имеет значение position: absolute, он удаляется из макета страницы и не влияет на макет других объектов (кроме его собственных дочерних элементов).

Например, если вы хотите расположитьтри изображения друг над другом в объекте-контейнере (возможно, чтобы их можно было циклически перемещать в слайд-шоу, это можно сделать с помощью этого CSS:

.container {position: relative; height: 100px; width: 133px;}
.container img {position: absolute; top: 0; left: 0;}

Answer 3

Должен ли я создать супер относительный родительский div, из которого вся иерархия div должна позиционироваться как абсолютная?

Да.Каждый абсолютно позиционированный элемент будет расположен внутри своего ближайшего предка, который сам абсолютно или относительно позиционирован.