Родительский контейнер что это

Работа с flexbox

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

Как использовать Flexbox

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

Для этого необходимо определить родительский контейнер как display flex CSS :

Затем нужно установить размер дочерних элементов и с помощью margin: auto задать их равномерное распределение в пределах родительского контейнера:

Свойства родительского элемента flexbox

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

Свойства контейнера flexbox

Display

Свойство display позволяет определить div в качестве контейнера:

Flex-direction

CSS flex direction позволяет определить направление, в котором дочерние элементы будут распространяться ( четыре значения ):

• row — слева направо;
• row-reverse — справа налево;
• column — сверху вниз;
• column-reverse — снизу вверх.

Пример слева направо

Пример справа налево

П ример сверху вниз

Пример снизу вверх

flex-wrap

По умолчанию flexbox располагает дочерние элементы в одну строку. Но, изменив значение flex-wrap , можно разрешить их перенос на новую строку:

• nowrap — одна строка, слева направо;
• wrap — несколько строк, слева направо;
• wrap-reverse — несколько строк, справа налево.

Пример несколько строк слева направо

Пример несколько строк справа налево

flex-flow

Flex-flow позволяет объединить два описанных выше свойства в одно. Это сокращенное свойство, определяющее flex-direction и flex-wrap :

justify-content

Определяет, как размещаются внутри div контейнера дочерние элементы. Доступно пять различных значений этого свойства CSS flex :

• flex-start — выравнивает элементы по началу контейнера;
• flex-end — выравнивает элементы по концу контейнера;
• center — выравнивает элементы по центру;
• space-between — элементы размещаются с одинаковыми отступами друг от друга, первый элемент выравнивается по началу контейнера, последний элемент — по концу контейнера;
• space-around — для элементов задаются одинаковые отступы со всех сторон.

align-items

Align-items позволяет выровнять элементы по вертикальной оси. Доступно пять различных значений этого свойства CSS flex :

• flex-start — выравнивает элементы по верху;
• flex-end — выравнивает элементы по низу;
• center — центрирует элементы по вертикали;
• baseline — выравнивает элементы по базовому уровню;
• stretch — растягивает элементы, чтобы они соответствовали размерам контейнера.

align-content

Выравнивает контент и пространство между полями, когда контент перемещается на несколько строк. Доступно шесть значений этого свойства CSS flex 1 :

• flex-start — несколько строк будут смещены к началу контейнера;
• flex-end — несколько строк будут смещены к концу контейнера;
• center — несколько строк будут размещены по центру;
• space-between — для нескольких строк будет задано одинаковое расстояние между ними;
• space-around — для нескольких строк будет задано одинаковое расстояние вокруг них;
• stretch — несколько строк будут растягиваться, чтобы занять все пространство.

Свойства дочерних элементов flexbox

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

order

По умолчанию дочерние элементы размещаются в том же порядке, в котором они размещаются в DOM . Но с помощью свойства order можно изменить порядок блоков:

flex-grow

По умолчанию все элементы в CSS flex будут принимать одинаковые размеры по ширине. Но с помощью свойства flex-grow можно сделать так, чтобы отдельные элементы растягивались в несколько раз больше, чем остальные.

Например, если для всех элементов задано значение flex-grow 1 , а для одного элемента — 2, то он будет в два раза шире других элементов:

flex-shrink

Flex-shrink определяет, каким образом элементы будут сжиматься.

Реальные примеры

Применяя описанные выше свойства flexbox в различных комбинациях, можно создавать разнообразные шаблоны. Рассмотрим примеры использования Flexbox.

Меню навигации

Основное преимущество CSS flex заключается в том, что элементы могут адаптироваться. Когда размеры экрана изменяются, flexbox изменяет ширину блоков, чтобы они соответствовали родительскому контейнеру. Данная технология использует процентное значение размеров по отношению к родительскому контейнеру, что и позволяет элементам навигации легко адаптироваться к размеру экрана.

Очень просто перейти к размерам на всю ширину экрана устройства, изменив способ, с помощью которого flexbox реагирует на изменения.

Посмотрите, как в приведенном выше примере элементы реагируют на различные размеры экрана. Ниже приведен код HTML и CSS , с помощью которых можно создать адаптивное меню навигации с использованием flexbox :

Столбцы одинаковой высоты

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

Посмотрите, как можно создать столбцы одинаковой высоты с помощью CSS flex 1 .

Код HTML и CSS , с помощью которых можно создать такой макет:

В этом коде CSS единственным свойством, которое нужно задать для получения одинаковых столбцов, является align-items: stretch :

Центрирование по вертикали

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

Но с помощью flexbox это делается еще проще. Для этого используются два свойства CSS flex1:justify-content и align-items .

Изменение порядка вывода элементов с помощью медиа-запросов

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

С помощью display flex CSS мы можем изменить порядок вывода различных разделов. Можно переместить блок основного контента перед левым сайдбаром.

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

Теперь порядок размещения будет следующим:

• Основной контент;
• Заголовок;
• Правая боковая панель;
• Левая боковая панель;
• Подвал.

Просмотрите приведенную ниже демо-версию. Измените размеры окна браузера, чтобы увидеть, как меняются местами области страницы.

Поддержка браузерами

Сейчас flexbox поддерживается в 88% браузеров:

• Chrome 21+ поддерживает flexbox без префикса;
• Firefox 22+ поддерживает flexbox без префикса;
• Safari поддерживает flexbox с префиксом – webkit ;
• Opera 12.1+ поддерживает flexbox без префикса;
• IE 10 поддерживает flexbox с префиксом -MS , но уже IE11 поддерживает flexbox без префикса.

Баги flexbox

На Github существует проект со списком ошибок CSS flex и способами, как их можно обойти, пока проблема не будет устранена в движках браузеров.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Вадим Дворников автор-переводчик статьи « How To Get Started With CSS Flexbox »

Родитель – контейнер. Важное о прямых родительских обязанностях

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

Жизненное:

Вечер. Уставшая «как бы мама», воспитывающая дочь одна, возвращается с работы. Дома не убрано и она сразу же переходит на крик: «Сколько может это продолжаться! Трудно убрать?! Опять в телефоне сидела? У меня больше нет сил – где ремень?!». У нее правда нет сил, но причина – не в дочери, а в том, что она устала на работе, не справляется со своими обязанностями, чувствует себя плохой матерью (что отчасти соответствует действительности) и единственный человек, на которого она все может вылить – это ее десятилетняя дочка (на деле самостоятельная и неплохо справляющаяся с хозяйством пока мать на работе).

«Как бы мама» орет, дочь ей грубо отвечает (пытаясь защитить себя), мать орет сильнее, не выдерживает, шлепает ее. И хотя физически ей от этого немного легче (разрядилась), на душе еще более тошно – ко всем чувствам примешивается вина и стыд, с которыми мать не справляется, и вместо того, чтобы попросить прощения (стыдно вдвойне), начинает плакать (переходит из агрессора в жертву), обвиняя девочку в том, что та ее доводит. Дочь ее жалеет и успокаивает.

фото Adme.ru

Родителю необходимо заботиться не только о (а) физическом состоянии ребенка (обеспечивать ему возможность спать, есть, пить, двигаться, приучить к горшку), (б) интеллектуальном развитии (только без фанатизма), (в) социальном развитии ребенка (научить его особенностям поведения в социуме и правилам безопасности, НО И ЭМОЦИОНАЛЬНОМ РАЗВИТИИ. Причем эмоциональное развитие по значению я бы ставила до пункта «б» и «в», потому как писать и читать так или иначе к школе научаются практически все ментально здоровые дети, а вот понимать себя, регулировать свои чувства, обходиться со своей агрессией, тревогой, болью – способен далеко не каждый, даже вырастая.

Родителю не просто желательно, но необходимо заботиться об эмоциональном состоянии и развитии ребенка. Говоря полутерминологически, родитель должен обеспечить ребенку контейнер (порой путаем с «унитаз») для чувств. Я не люблю слово «должен», но в данном случае использую именно его, чтобы не отвертеться. И тот аргумент, что многие взрослые не могут/не умеют справляться не то, что с детскими эмоциональными переживаниями, но и с собственными – не оправдание. Не умеете – учитесь. Читайте книги, идите к психологу, прорабатывайте. Вы же кормите своего ребенка, даже если когда-то не умели готовить, вы покупаете готовую еду в конце концов, но даете ребенку поесть (иногда даже слишком настойчиво), потому что знаете: есть нужно, чтобы быть живым и физически здоровым. Чтобы быть психически живым и здоровым необходимо обеспечить ребенку возможность проживать/выливать/выплескивать свои эмоции, быть «контейнером» для его чувств, потому как своего собственного (внутреннего) контейнера у ребенка изначально нет.

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

Вначале с ребенком просто что-то происходит (например, закипает злость), он кричит и колотит руками. Он не знает, что именно происходит и не может держать в себе. Ему нужно это чувство «отдать». Не потому что он не хочет придержать свою злость при себе, а потому что не может. Как не может сначала контролировать многие физиологические процессы. Ему нужно выплеснуть злость, «отдать» чувство, что значит — поместить его в «контейнер» и таким контейнером должен быть родитель.

Что значит быть хорошим «контейнером»?

Для того, чтобы в контейнер можно было бы что-то положить – в контейнере должно быть свободное место, правильно? Из чего следует пункт первый:

1. Хороший контейнер – это контейнер, где есть свободное место. Говоря простым языком, если у вас самого внутри все кипит и «чаша переполнена», то вы не сможете принять эмоции вашего ребенка. И когда он кричит, швыряет вещи, истерит, то скорее всего, вашей реакцией будет либо ответный крик/истерика/встречная агрессия, либо собственные слезы бессилия. И в этом случае уже ребенок вынужден быть контейнером чувств «как бы родителя», а в сущности такого же растерянного/испуганного/беспомощного ребенка. Только у реального ребенка нет для этого ресурсов и ему приходится идти на неокрепших ногах, кое-как становится родителем собственному родителю, вбирая в себя его кипящие чувства. А поскольку справиться он с ними, переработать их, не может — нечем, то впоследствии он будет отыгрывать их в виде симптомов: болезней, агрессии, странностей поведения.
2. Быть хорошим контейнером значит способность принять любое чувство ребенка. Обычно родители легко допускают радость ребенка, восторг, интерес, им бывает сложнее со тревогой, страхом, подавленностью, и почти невыносимо с гневом, возмущением, яростью. В некоторых семьях родители транслируют: «злой = плохой, злиться – плохо, на маму/папу/бабушку злиться нельзя». Правда, и с чувством радости бывают проблемы. Например, мама может требовать восторженной радости по поводу одних ситуаций (скажем, поездки, которую она организовала для всей семьи) и обесценивать чувство радости ребенка по поводу того, что приносит удовольствие именно ему, а ей самой кажется глупым/неважным/скучным (нужное подчеркнуть). Природа же равнодушна к морали и человеческим неврозам. Она дала нам врожденные эмоции, чаще всего к ним относят: страх, радость (как удовольствие), злость (как неудовольствие), отвращение, интерес. Эти эмоции нам необходимы, чтобы жить полной жизнью, они помогают нам выживать, защищать свои границы, узнавать новое. Есть также и множество оттенков названых эмоций, сочетаний, чувств. Среди которых нет плохих. Если эмоция/чувство возникло — значит для этого было основание. И родитель должен быть открыт ЛЮБОМУ чувству своего ребенка по отношению к ЛЮБОМУ объекту (независимо от морали). Другое дело, что не всякая форма выражения допустима. И задача родителя – научить ребенка выражать свои чувства в приемлемой форме. Например, товарищ по песочнице сломал игрушку. Эмоция ребенка – ярость. Форма выражения может быть различна, как примеры: 1) ярость/злость подавляются, превращаются в обиду и ребенок начинает беззащитно плакать, 2) ребенок в ярости ударяет товарища совком по голове, 3) ребенок падает на песок и закатывает истерику, 4) ребенок просто и ясно говорит: «Я злюсь, что моя игрушка сломана…» (обычно в случае наличия родителя-«контейнера»).
3. Быть хорошим контейнером значит облечь чувства ребенка в слова.Проявить эмпатию (что значит почувствовать то, что чувствует он). Изначально ребенок не понимает, что именно с ним происходит. Он просто ощущает некое внутреннее состояние. Что-то внутри происходит и выражение лица меняется, руки сжимаются в кулаки, тело напрягается. Ребенок ищет выход этому состоянию через поведение, тело, крик. Родителю необходимо назвать это чувство, а лучше и его причину. «Тебе сейчас страшно», «Тебе тревожно», «Ты растерялся», «Ты сердишься, потому что не можешь дотянуться до этой игрушки».
4. Быть хорошим контейнером значить побыть с чувством ребенка. Продолжить проявлять эмпатию (хоть некоторое время). После того, как мы услышали чувство ребенка и озвучили его, важно хоть немного (а лучше столько, сколько нужно самому ребенку) побыть с его чувством. «Тебе сейчас страшно среди новых людей и хочется спрятаться. И хочется остаться незамеченным, и чтобы никто не обращал внимание. Так?» или «Ты в гневе на учительницу. Тебе просто хочется рычать от злости, кричать, ругать. Ты просто в ярости от несправедливости». «Мы не спешим тут же решать ситуацию, давать советы, успокаивать. Нам как родителям необходимо просто побыть рядом, вместе. Обнять, если нужно, подержать за руку, можно говорить или помолчать.

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

5. Предложить допустимые формы выражения эмоции. Но не столько социально одобряемые, сколько – подходящие для самого ребенка. Например, выразить злость маленькому ребенку может помочь рычание («Давай порычим»), или потопать ногами, постучать кулаками, помутузить боксерскую грушу, но бить и унижать другого человека – недопустимо, даже когда злишься. Это относится ко всем (!) членам семьи.

6. Говорить о своих собственных чувствах. Чтобы (а) с одной стороны на своем примере показывать, как именно можно говорить о чувствах (любых! чувствах), (б) дать ребенку понять, как его чувства и их проявление воспринимаются окружающими. Например: «Я слышу, что ты очень устал и хочешь побыть один, но меня задевает грубость твоих слов. Ты мог бы просто попросить меня, чтобы я оставила тебя на час-другой». Здесь любимая книжка Юлии Гиппенрейтер («Общаться с ребенком. Как?») — Вам в помощь.

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

Мама, ты контейнер!

Что такое контейнерирование эмоций, и как это работает

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

Человек и эмоции: кто кого?

Как часто бывает, что вы не можете справиться со своими чувствами? Так злы, что полночи не можете заснуть, прокручивая в голове возможный диалог с обидчиком, или так расстроены, что кусок в горло не лезет, или так напуганы, что принимаете неразумные, нерациональные решения, за которые вам позже будет неловко… Если вы принялись сейчас прокручивать в голове такие ситуации, то вы заметите, что у них у всех есть нечто общее: в эти моменты вы не можете управлять охватившими вас чувствами и действуете во вред себе. И неважно, есть у вашей реакции внешние проявления (разозлился – полез в драку) или нет (не полез в драку, но весь день переживал, поднялось давление) – вред все равно несомненен.

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

Я – контейнер, ты – контейнер…

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

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

Что мы получаем в итоге?

Спокойный ребенок, оставшийся ровно с той долей эмоций (и даже неважно, положительных или отрицательных), с которой он может справиться.

Мама, которая без всякого вреда для себя «впитывает» эмоциональные излишки.

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

«Эврика!» — возможно, воскликните вы. Вот же он, секрет счастливого материнства! Обнимай, слушай, утешай – и будет счастье и тебе, и ребенку. Разумеется, все не так просто.

Жизнь в поисках контейнера

Правда, вы тоже сейчас вспомнили, как хорошо было в детстве, когда с любой бедой можно было прибежать к всесильной и всемогущей маме? Но сейчас ведь вы не бежите к маме? Конечно, все мы периодически жалуемся друзьям, супругам, да и маме порой, но меру знаем. Однако есть люди, которые так и не научились справляться со своими эмоциями – никак, ни с какими. Свое плохое и хорошее настроение они тоннами изливают на окружающих, совершенно не интересуясь вопросами эмоциональной гигиены. Жертвы их эмоционального терроризма постепенно превращаются из «контейнеров чувств» в «помойку чувств», куда сливают все подряд…

” Что делать в этой ситуации, в общем, понятно – бегите как можно дальше! Но как не позволить своему ребенку превратиться вот в такое бестактное существо, не отказывая ему ни в сочувствии, ни в утешении?

Отучение от контейнера

От контейнерирования – вообще говоря, совершенно естественного и необходимого этапа в жизни ребенка, нужно отучать так же настойчиво и постепенно, как от подгузников, детской бутылочки и соски пустышки. И так же как с подгузниками, тут нет конкретной даты, когда можно твердо сказать: «Все, теперь ты можешь обойтись и без этого». Но тренировать ребенка, безусловно, нужно. Как это сделать?

Этап №1. Осознание эмоций

Учите ребенка распознавать свои чувства. Задавайте наводящие вопросы: он злится? может, испугался? позавидовал приятелю? Проговаривайте то, что ребенок чувствует, вслух. Сначала ведущая роль принадлежит вам, потом она постепенно перейдет к ребенку.

” Главное правило остается неизменным – сперва утешаем, потом воспитываем.

Этап №2. План действий

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

” Переживания не должны быть бесплодными, они должны побуждать нас к осмысленному действию. Ну, если вы не хотите, чтобы ваш ребенок, став взрослым, по полночи ворочался в кровати, прокручивая в голове неприятный диалог с коллегой…

Этап №3. Отлучение от контейнера

Мама – всегда мама, однако нежелание огорчать и расстраивать маму вовсе не означает утрату доверия и взаимопонимания. Постепенно ребенок должен учиться справляться со своими эмоциями сам. Когда видите, что ребенок не столько изливает вам свое горе, сколько упивается им, сокращайте время обнимашек! Быстрее выводите ребенка на тропу конструктива – «давай подумаем вместе, что теперь можно сделать». С мелкими горестями, вроде ушиба и царапины, ребенок должен справляться сам. Ссоры с приятелем тоже, в конце концов, должны доноситься до вас как информация, а не эмоциональный торнадо. Вы указали ребенку алгоритм управления эмоциями – пусть учится им пользоваться!

” Конечно, как и в случае с горшком и пустышкой, возможны «откаты». Когда ребенок устал, болен, попал в непривычную среду, ему снова может понадобиться ваша помощь.

А вы хороший контейнер?

12.09.2019
Автор: Екатерина Ершова

о детях от 4 до 7 лет, ребенок и родители Другие статьи автора

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

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

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

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

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

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

Все 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 с относительным позиционированием