Сделать дочерний элемент видимым вне переполнения: скрытый родитель

100

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

Но есть еще одна интересная особенность в сочетании с margin: auto...

Если ПРЕДЫДУЩИЙ брат является плавающим элементом, он фактически будет отображаться рядом с ним. То есть, если родственный элемент является, float:leftтогда контейнер с float:none overflow:hiddenбудет отображаться справа от родственного брата, без новой строки - точно так же, как если бы он плавал в обычном потоке. Если предыдущий брат - float:rightэто контейнер, он появится слева от него. Изменение размера этого контейнера точно покажет, что он центрирован между плавающими элементами. Скажем, если у вас есть два предыдущих брата и сестры, один float:leftдругой float:right, контейнер появится посередине между ними.

Так вот проблема ...

Как сохранить такой макет БЕЗ маскировки детей?

Поиск в Интернете дает мне возможность узнать, как clear:bothрасширять контейнер ... но я не могу найти альтернативного решения для сохранения левого / правого центрирования предыдущего ребенка. Если вы создадите контейнер, overflow:visibleон внезапно проигнорирует поток макета плавающих элементов и окажется слоистым поверх плавающего элемента.

Итак, вопрос :

Мне нужен контейнер, overflow:hiddenчтобы сохранить макет ...

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

ИЛИ

Как мне сделать overflow:visibleтак, чтобы я мог абсолютно позиционировать дочерний элемент относительно родителя вне контейнера ... ЕЩЁ СОХРАНИТЬ родственный поток float-like-layout-flow?

css overflow css-float center hidden Marknadal
источник

Ответы:

86

Вы можете использовать clearfix"сохранение макета" таким же образом overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

добавить class="clearfix"класс к родителю и удалитьoverflow: hidden;

Frexuz
источник
Хм! Умница, я как раз сейчас экспериментирую с этим. Что я сейчас получаю, так это то, что сгенерированный контент ведет себя правильно, сохраняется в потоке макета, однако родительский элемент все равно игнорирует его и накладывает слой поверх плавающих элементов. Тем не менее, это очень хорошая идея, и я буду больше с ней играть, чтобы увидеть, смогу ли я заставить ее вести себя правильно, и вернусь, чтобы проголосовать. Спасибо :).
marknadal
@ user1671639 ваш пример действительно не подходит для clearfix. Вам нужно что-то еще, поэтому я предлагаю вам задать вопрос по вашей проблеме.
Frexuz
Это работает не так, как overflow:hiddenу всех. Применение clearfix к родительскому div не позволяет всем дочерним компонентам "содержаться" на той же высоте, что и родительский.
Хом Назид
11

Ни один из опубликованных ответов не помог мне. Однако настройка position: absoluteдочернего элемента работала.

рефлексивный
источник
18
Но разве родительский DIV не замаскирует его, если он выйдет за границы родительского DIV (у которого есть переполнение: скрыто)?
marknadal
9
Afaik это не так, пока у родителя нет position: relative. Затем дочерний элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка, вынимая его из обычного (родительского) потока dom.
Pim Schaaf
Если у родителя есть position: relative и он не требуется, вы можете сделать его position: unset.
yeahlad 06
Верно, если он position: fixedили абсолютное позиционирование относительно чего-то за пределами родительского объекта visibility: hidden, он будет видимым. Однако вам часто нужно (хотите) расположить его относительно родителя, чтобы он был более устойчивым к изменениям кода. Тогда эти решения не являются альтернативой.
ArneHugo
10

Это старый вопрос, но я сам с ним столкнулся.

У меня есть полурешения, которые работают ситуативно для первого вопроса («Дети, видимые в переполнении: скрытый родитель»)

Если родительский div не обязательно должен быть position: relative, просто установите для дочерних стилей значение visibility: visible.

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

Вот дерьмовый пример, просто отправьте его в HTML-файл для просмотра. 

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>
Томас Дэвис
источник
Вот дерьмовый пример, просто отправьте его в html-файл для просмотра. <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear: both; height: 1000px; top: 100px; left: 10px; "> а </div> </div> </div> </code>
Томас Дэвис
4
Спасибо за попытку ответить, но это не работает, потому что фиксированная позиция автоматически позиционирует элемент относительно области просмотра, то есть он не перемещается вместе с родителем. Фактически, если у вас есть прокручиваемая страница, она будет оставаться на 10 пикселей, 10 пикселей при прокрутке.
marknadal
«Если родительский div должен быть position: relative, я нашел единственный способ показать дочерние элементы - position: fixed». Спасибо за это. У меня был всплывающий всплывающий пузырь справки, который нужно было переполнять, даже если у родителя было overflow: scroll. В итоге у меня появился абсолютный div с относительной внутренней, а затем фиксированной областью содержимого.
Джек Моррисси, 03
Спасибо, у меня это сработало. У меня был родитель с относительной позицией, и это было необходимо, потому что его положение было установлено с помощью left. Использование margin-leftвместо этого даст тот же эффект, поэтому мне больше не нужно было использовать относительное положение.
Фелипе Кастро
1

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

Вальф
источник