Почему элементы, стоящие ниже элемента с position:relative проваливаются на вверх?
Здравствуйте! Почему элемент(зелёный), стоящие ниже элемента с position:relative и его дочерним position:absolute, проваливаются наверх? Как с этим бороться? P.S. Пробовал элементу, у которого position relative поставить рамку. Так же слетает...
Что делать?
1. Задать высоту красному блоку равную высоте зеленого. Или padding для ::after. Или любым другим способом.
2. Синему блоку задать margin равный или больше высоты зеленого.
Но с виду все это производит сомнительное впечатление. И очень похоже, что надо изначально выбирать другой путь. Если бы вы показали конечную цель, было бы проще.
Чтобы бороться нужно понять что такое поток (flow) и пересмотреть структуру с учетом того, что абсолютно позиционированные элементы из потока выпадают.
Так делать КОНКРЕТНО, что надо??? Я призываю вас не уподобляться политикам, которые говорят общими словами. Далее, когда вы говорите "пересмотреть структуру" вы что имеете ввиду? Может, правила добавить, это допускаю. Только вот не знаю, какое правило?
Stalker_RED: Что переделывать??? Я вот высоту сейчас добавил блоку relative нижний простой элемент, что уехал наверх начал спускаться в низ. То есть, помогло! Какие ещё способы существуют??? Если конечно, вы знаете...
Alex_87: Ну или поменьше пользоваться теми штуками, работу которых не понимаете. Так норм: https://codepen.io/anon/pen/mMJRez ? Зачем вам было нужно абсолютное позиционирование?
Stalker_RED: Вы, если хотите, не пользуйтесь вообще ничем, а я буду узнавать и учиться! А абсолютное позиц. мне было нужно, чтобы сразу блоком перемещать при различных madia запросах... В 2-х словах не объяснишь!
Alex_87: Я знаю как позиционировать элементы, и применяю абсолютное позиционирование там, где мне это нужно. А у вас ситуация примерно такая, если утрировать:
Нарисовать что-то
этакое
заявить что это чертеж и отдать строителям, напрмиер. А потом удивляться почему окно и крыша валяются на земле, а не висят в воздухе.
Alex_87: Вам уже ответили - элементы "проваливаются вверх" потому, что у блока с position:relative нулевая высота. Как бороться? Ну добавить ему высоту вы и сами догадались, но вам еще предстоит получить пачку проблем с этим костылем. Правильно было бы переделать структуру, но для вас это слишком простой путь. Ну ок.
Stalker_RED: Stalker_RED: Я же сказал, в 2-х словах не объяснить! Значит надо, если я применил! И я всё нормально объяснил. Думать "строителям" зачем мне это надо не стоит. И раз вы всё знаете, зачем весь этот разговор? Разве не проще просто сказать!?
Все пропало, замкнутый круг. Вы не можете объяснить чего хотите и не понимаете как исправить положение самостоятельно. Придется немного остыть, и либо попытаться описать требования либо таки читать учебник. Такие дела.
Еще раз, для тугих: элементы с position:absolute изымаются из потока, и не занимают место. Вы можете использовать костыли - добавить в родительский элемент каких-то других элементов или задать высоту жестко height: 500px, например. Это принесет вам дополнительные проблемы, но "надо значит надо". Хоть вы и не понимаете как это работает.
Stalker_RED: Вы издеваетесь? Первые 2 сообщения, которые вы привели, относятся к ДВУМ РАЗНЫМ ОТВЕТАМ!!! ... И... Я ЕЩЁ РАЗ ПОВТОРЯЮ, ДЛЯ ОСОБО ОДАРЁННЫХ! Я ХОЧУ ИСПРАВИТЬ, ХОЧУ!!!! И Я ВАМ В 4 РАЗ ОБ ЭТОМ ГОВОРЮ! ВЫ ПРОСТО СКАЖИТЕ, ЧТО ВЫ ИМЕЕТЕ ВВИДУ?
Alex_87: Я не издеваюсь, но я не знаю как исправить главную ошибку: непонимание потока и абсолютного позиционирования. Вы неправильно себе представляете как оно работает и пытаетесь натянуть сову на глобус, образно говоря. Я бы подсказал как переделать, но я не могу догадаться что вы пытаетесь сделать.
Скриншот не соответствует вашему описанию.
Блок с position: relative по высоте должен быть равен высоте дочернего элемента, раз дочерний элемент position: absolute, то есть выпадает из потока, то и высоты блока position: relative будет нулевой - position: absolute ведь выпал из потока.
По этому зелёный блок и проваливается.
Бороться с этим - пересмотреть структуру, в первую очередь.
Не понял вас! Я специально отступил рамками, чтобы вам было видно, где что находиться) Красная рамка - relative(родитель). Синяя - дочерний элемент это absolute. Второе... Я не задавал им никакие высоты. ... Что конкретно предлагаете сделать?
Простой
