Почему элементы, стоящие ниже элемента с position:relative проваливаются на вверх?

Question

[Alex_87]

Здравствуйте! Почему элемент(зелёный), стоящие ниже элемента с position:relative и его дочерним position:absolute, проваливаются наверх? Как с этим бороться? P.S. Пробовал элементу, у которого position relative поставить рамку. Так же слетает...

Comments

[HelpSophie]

На вопрос "почему", уже ответили.

Что делать?
1. Задать высоту красному блоку равную высоте зеленого. Или padding для ::after. Или любым другим способом.
2. Синему блоку задать margin равный или больше высоты зеленого.

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

Answer 1

[Stalker_RED]

Как и говорил Кирилл Кубляков у блока с relative (зеленая рамка) нулевая высота, а ваш рисунок не соответствует описанию.
https://codepen.io/anon/pen/NvqbbL

Чтобы бороться нужно понять что такое поток (flow) и пересмотреть структуру с учетом того, что абсолютно позиционированные элементы из потока выпадают.

Comments

[Alex_87]

Так делать КОНКРЕТНО, что надо??? Я призываю вас не уподобляться политикам, которые говорят общими словами. Далее, когда вы говорите "пересмотреть структуру" вы что имеете ввиду? Может, правила добавить, это допускаю. Только вот не знаю, какое правило?

[Stalker_RED]

Alex_87: Учебник КОНКРЕТНО читать и переделывать все нафиг.

[Alex_87]

Stalker_RED: Что переделывать??? Я вот высоту сейчас добавил блоку relative нижний простой элемент, что уехал наверх начал спускаться в низ. То есть, помогло! Какие ещё способы существуют??? Если конечно, вы знаете...

[Stalker_RED]

Alex_87: Ну или поменьше пользоваться теми штуками, работу которых не понимаете. Так норм: https://codepen.io/anon/pen/mMJRez ? Зачем вам было нужно абсолютное позиционирование?

[Alex_87]

Stalker_RED: Вы, если хотите, не пользуйтесь вообще ничем, а я буду узнавать и учиться! А абсолютное позиц. мне было нужно, чтобы сразу блоком перемещать при различных madia запросах... В 2-х словах не объяснишь!

[Stalker_RED]

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

этакое

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

[Stalker_RED]

Alex_87: Вам уже ответили - элементы "проваливаются вверх" потому, что у блока с position:relative нулевая высота. Как бороться? Ну добавить ему высоту вы и сами догадались, но вам еще предстоит получить пачку проблем с этим костылем. Правильно было бы переделать структуру, но для вас это слишком простой путь. Ну ок.

[Alex_87]

Stalker_RED: КАК ПЕРЕДЕЛАТЬ СТРУКТУРУ, ВЫ МОЖЕТЕ ОБЪЯСНИТЬ???

[Alex_87]

Stalker_RED: Stalker_RED: Я же сказал, в 2-х словах не объяснить! Значит надо, если я применил! И я всё нормально объяснил. Думать "строителям" зачем мне это надо не стоит. И раз вы всё знаете, зачем весь этот разговор? Разве не проще просто сказать!?

[Stalker_RED]

КАК ПЕРЕДЕЛАТЬ СТРУКТУРУ, ВЫ МОЖЕТЕ ОБЪЯСНИТЬ???

Я же сказал, в 2-х словах не объяснить!

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

Еще раз, для тугих: элементы с position:absolute изымаются из потока, и не занимают место. Вы можете использовать костыли - добавить в родительский элемент каких-то других элементов или задать высоту жестко height: 500px, например. Это принесет вам дополнительные проблемы, но "надо значит надо". Хоть вы и не понимаете как это работает.

[Alex_87]

Stalker_RED: Вы издеваетесь? Первые 2 сообщения, которые вы привели, относятся к ДВУМ РАЗНЫМ ОТВЕТАМ!!! ... И... Я ЕЩЁ РАЗ ПОВТОРЯЮ, ДЛЯ ОСОБО ОДАРЁННЫХ! Я ХОЧУ ИСПРАВИТЬ, ХОЧУ!!!! И Я ВАМ В 4 РАЗ ОБ ЭТОМ ГОВОРЮ! ВЫ ПРОСТО СКАЖИТЕ, ЧТО ВЫ ИМЕЕТЕ ВВИДУ?

[Stalker_RED]

Alex_87: Я не издеваюсь, но я не знаю как исправить главную ошибку: непонимание потока и абсолютного позиционирования. Вы неправильно себе представляете как оно работает и пытаетесь натянуть сову на глобус, образно говоря. Я бы подсказал как переделать, но я не могу догадаться что вы пытаетесь сделать.

Answer 2

[Кирилл]

Скриншот не соответствует вашему описанию.
Блок с position: relative по высоте должен быть равен высоте дочернего элемента, раз дочерний элемент position: absolute, то есть выпадает из потока, то и высоты блока position: relative будет нулевой - position: absolute ведь выпал из потока.
По этому зелёный блок и проваливается.
Бороться с этим - пересмотреть структуру, в первую очередь.

Comments

[Alex_87]

Не понял вас! Я специально отступил рамками, чтобы вам было видно, где что находиться) Красная рамка - relative(родитель). Синяя - дочерний элемент это absolute. Второе... Я не задавал им никакие высоты. ... Что конкретно предлагаете сделать?

[Stalker_RED]

Alex_87: Соберите пример на jsfiddle или codepen.

[Alex_87]

Stalker_RED: https://codepen.io/Alexei_87/pen/xLGRKb