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

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

77 голосов
/ 02 августа 2010

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

Но он также имеет еще одну интересную особенность в сочетании с margin: auto ...

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

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

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

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

Итак вопрос :

Мне нужен контейнер overflow:hidden для сохранения макета ...

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

OR

Как мне overflow:visible, чтобы я мог абсолютно точно позиционировать дочерний элемент относительно родителя вне контейнера ... ДА сохранить родственный float-like-layout-flow?

Ответы [ 4 ]

77 голосов
/ 04 января 2012

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

10 голосов
/ 02 июня 2012

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

8 голосов
/ 19 января 2011

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

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

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

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

Вот дерьмовый пример, который нужно просто опубликовать в 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>
1 голос
/ 29 февраля 2016

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

...