Вертикальное позиционирование css – Выравнивание элементов по горизонтали css. Все способы вертикального выравнивания в CSS. Абсолютное позиционирование дочернего элемента

CSS вертикальное выравнивание для всех

Выравнивание текста по вертикали в CSS — весьма непростая работа. Я видел достаточно людей, борющихся с этим, и постоянно обнаруживаю “критические” ошибки, когда дело доходит до реального адаптивного дизайна.

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.

Посмотрите пример

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

Правда у этого подхода CSS выравнивания по вертикали есть недостаток. Если текст многострочный, тогда высота строки будет умножена на количество строк. Скорее всего, в этом случае, у вас получится ужасно сверстанная страница.

Взгляните на этот пример

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

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

Посмотрите пример

Почему это работает с табличной разметкой, но не с элементами div? Потому что у строк в таблице одинаковая высота. Когда содержимое ячейки таблицы не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальные отступы, чтобы центрировать содержимое.

Начнем с основ выравнивания по вертикали CSS div:

• position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
• position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
• position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

• Старое свойство: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример;
• Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

Можно использовать flexbox. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Посмотреть пример

Используя flexbox расположение, можно центрировать несколько блоков.

Если вы примените то, что узнали из этих примеров, то сможете освоить CSS выравнивание блока по вертикали в кратчайшие сроки.

Изучение CSS разметки

FlexBox Froggy

Полное руководство по flexbox

Песочница flexbox

Данная публикация представляет собой перевод статьи «CSS Vertical Align for Everyone (Dummies Included)» , подготовленной дружной командой проекта Интернет-технологии.ру

CSS: Вертикальное выравнивание текста

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

<style type="text/css">
div {
border: 1px solid #000;
height: 10em;
width: 10em;
}
</style>
<div>
<span>Some text</span>
</div>


и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

Решение задачи

«Правильные» браузеры (включая MSIE

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div {
display: table-cell;
vertical-align: middle;
}

или

div {
display: table-cell;
vertical-align: bottom;
}

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div {
position: relative;
}
div span {
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}

Этот набор правил работает и в «правильных» браузерах.

Указывать свойства

div span {
display: block;
width: 100%;
}

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center;.

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

<div>
<span><span>Some text</span></span>
</div>

Тогда искомый набор правил будет иметь следующий вид:

div {
position: relative;
}
div span {
display: block;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
}
div span span {
position: relative;
top: -50%;
}

Смысл этого решения в том, что внутренний элемент позиционируется по вертикали абсолютно на половине высоты блока, а затем смещается вверх на половину собственной высоты. Используется неправильная интерпретация высоты в MSIE.

Существует другой способ решения этой задачи для MSIE — использование expression. Недостаток этого подхода — выравнивание не будет работать при отключенном Javascript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).

Заключение

Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).

Материал для изучения:

• Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertical align (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Еще один способ вертикального выравнивания в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Выравнивание элементов по горизонтали css. Все способы вертикального выравнивания в CSS. Абсолютное позиционирование дочернего элемента

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

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding «.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

.example-wrapper1 { background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; }

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute «, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top «,»right «,»bottom «,»left «) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

.example-wrapper2 { position : relative ; height : 250px ; background : url(space.jpg) ; } .cat-king { width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; }

Горизонтальное выравнивание

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align

«. При установленном значении «center » каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text { text-align : center ; padding : 10px ; background : #FF90B8 ; }

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3 { text-align : center ; background : #FF90B8 ; } .inline-text { display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; }

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto » (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper { height : 200px ; background : #F1BF88 ; } .lama1 { height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; }

Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) — он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.

Вертикальное выравнивание

С вертикальным выравниванием намного больше проблем — по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height » и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.

.example-wrapper4 { line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; }

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

.example-wrapper5 { line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; } .example-wrapper5 .text1 { display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; }

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

Выравнивание по вертикали в таблицах

Свойство «vertical-align » также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выр

Вертикальное позиционирование в CSS Grid Layout? — Хабр Q&A

Вариант №1

<div>
  <div>item-1</div>
  <div>item-2</div>
  <div>item-3</div>
  <div>
    
    <div>item-4-1</div>
    
  </div>
  <div>item-5</div>
  <div>item-6</div>
</div>

*
{
  margin: 0;
  padding: 0;
}

.wrapper
{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 15px 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.wrapper-2
{
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  
}
#block
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wrapper-2 > .item
{
  background: red;
  -ms-grid-column-align: center;
  justify-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

.wrapper > .item
{
  background: #cfcfff;
  padding: 15px;
}

.wrapper > .item-1
{
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-2
{
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 2 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-3
{
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 3 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-4
{
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
}

.wrapper > .item-5
{
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 2 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 1;
}

.wrapper > .item-6
{
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 3 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 1;
}

.wrapper > .item:nth-child(odd)
{
  background: #cff1ff;
} 

Указание координат для grid сетки, не препятствует задать использовать flex для координируемого блока. Flex с Grid’ом отлично дружат.

Вариант №2
https://habrahabr.ru/post/178021/

Позиционирование в CSS | CSS-Tricks по-русски

Позиционирование в CSS

Позиционирование в CSS кажется довольно простым. Указываете какой блок и где должен находиться. Однако всё не так просто, как кажется на первый взгляд. Есть несколько моментов, которые могут запутать новичков. Вы сможете извлечь из позиционирования гораздо больше пользы, если детально разберётесь как оно работает.

Box-модель в CSS и типы позиционирования.

Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

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

Свойство position в CSS может принимать пять значений:

• absolute
• relative
• fixed
• static
• inherit

Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным (absolute), относительным (relative) или фиксированным (fixed).

Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.

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

Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.

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

Ключевой момент в абсолютном позиционировании — это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.

Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установки абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.

Относительное позиционирование.

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

Представьте себе это так: некое изображение сдвигается, а на его месте остаётся «призрак», все элементы располагаются относительно этого «призрака». Это позволяет нам накладывать элементы друг на друга.

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

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

Фиксированное позиционирование

Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.

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

Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.

Z-index

Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.

Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение — ноль. Отрицательные значения также допустимы.

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

Проблемы позиционирования.

Рассмотрим несколько общих проблем, связанных с позиционированием, а также несколько слов об их решении.

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

   Одновременно можно использовать position:relative и float.

   Когда одновременно указывается position:absolute и float, то применяется не последнее указанное свойство. В этом случае, независимо от порядка следования этих стилей, применяется position:absolute, а итоговое (или вычисленное) значение свойства float устанавливается в none, независимо от начального значения, т.е. игнорируется.

2. Внешние отступы не «схлопываются» у элементов с абсолютным позиционированием. Допустим на странице есть параграф с нижним отступом в 20px. Следом за ним размещается картинка с верхним полем 30px. Расстояние между картинкой и текстом будет не 50px (20px + 30px), а 30px (30px > 20px). Такое поведение называется collapsing margins. Два отступа комбинируются в один. У элементов с абсолютным позиционированием нет полей для «схлопывания», поэтому результат может отличаться от ожидаемого.
3. IE и z-index. В IE6 выбор элемент происходит всегда на вершине стека, независимо от его z-index-а, z-index-ов окружающих элементов.

В IE6 и IE7 есть ещё одна проблема с z-index-ом. IE смотрит на родительский элемент для определения в какой группе элементов находится вершина стека, остальные браузеры используют глобальный контекст. Например:

<div>
  <p></p>
</div>
<img />

Мы ожидаем, что параграф будет находиться выше, чем изображение, поскольку его z-index больше. Однако IE6 и IE7 располагают выше картинку, поскольку они находятся в разных стеках документа. Один стек для div, второй для img, а у картинки z-index выше, чем у div-а.

Заключение

Свойство position устанавливает поведение расположения элемента в соответствии с одной из схем позиционирования. Доступные значения свойства: absolute, relative, fixed, static (по умолчанию) и inherit.

Схемы позиционирования определяют правила размещения элемента на web-странице, а также влияние на расположение соседних элементов.

Свойство z-index может быть применено только для элементов с установленным свойством position. Оно добавляет третье измерение на странице и устанавливает порядок стека элементов.

Свойство position кажется лёгким для восприятия, но работает немного иначе, чем кажется с первого взгляда. Зачастую разработчики думают что им необходимо относительное позиционирование, хотя скорее всего надо использовать абсолютное. В основном при вёрстке используется свойство float, а свойство position необходимо для элементов, которые вы хотите «вырвать» из общего потока документа.

Абсолютное позиционирование в CSS: понять раз и навсегда

Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.

Введение в позиционирование

Когда вы устанавливаете position: absolute, на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.

Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.

<body>
<div>
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>
</body>

Блоки box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

body {
  display: flex;
}

.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:

.box-4 без позиционирования

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

• какой родитель станет точкой отсчета;
• величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

.box-4 с абсолютным позиционированием без смещения

Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3, ни box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).

Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):

.box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

Если установить position: relative для элемента box-1, точкой отсчета станет он:

.box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

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

Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

.box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

Аналогично и для контейнера box-3:

.box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

А вот и наглядный красивый CSS-пример поиска позиционированного предка:

Перевод статьи How to understand CSS Position Absolute once and for all.

Еще больше полезных статей по CSS: