Зробіть дитину видимою поза переповненням: прихований батько

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 
— маркнадний
джерело

Відповіді:

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 ваш приклад насправді не застосовується до чіткого виправлення. Вам потрібно щось інше, тому я пропоную вам опублікувати запитання зі своєю проблемою.
— Frexuz
Це працює не так, як overflow:hiddenвзагалі. Застосування чіткого виправлення до батьківського div не дозволяє всі дочірні компоненти "міститися в межах" однакової висоти з батьківським.
— Хом Назид
11

Жодна з розміщених відповідей не спрацювала для мене. Налаштування position: absoluteдля дочірнього елемента все ж спрацювало.

— рефлексив
джерело
18
Але чи не маскував би батьківський DIV, якщо він виходив за межі батьківського DIV (який переповнюється: прихований)?
— marknadal
9
Afaik цього не робить, поки батько не має позиції: relative. Потім дочірня позиція розміщується відносно свого першого позиціонованого (не статичного) елемента-предка, виводячи його із регулярного (батьківського) потоку dom.
— Пім Шааф,
Якщо батько має position: relative і не вимагає цього, ви можете зробити це position: unset.
— yeladlad,
Правда, якщо воно 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; "> a </div> </div> </div> </code>
— Томас Девіс,
4
Дякуємо за спробу відповісти, але це не працює, оскільки фіксована позиція автоматично розміщує елемент відносно області перегляду, тобто він не рухається з батьком. Насправді, якщо у вас є сторінка, що прокручується, вона буде залишатися на рівні 10 пікселів, 10 пікселів під час прокрутки.
— marknadal
"Якщо батьківський div все-таки повинен бути position: relative, єдиним можливим способом, який я виявив дітям, був position: fixed." Дякую за це. У мене був спливаюча підказка, яка мала переповнюватися, навіть якщо батько переповнював: прокрутка. У підсумку я отримав абсолютний div, з відносною внутрішньою, а потім фіксованою областю вмісту.
— JackMorrissey 03.03.15
Дякую, це спрацювало на мене. У мене був батько з відносною позицією, і це було потрібно, оскільки його позиція була встановлена ​​за допомогою left. Використання margin-leftзамість цього дозволило б досягти того ж ефекту, тому мені більше не потрібно було використовувати відносне положення.
— Феліпе Кастро
1

В інших випадках, якщо clearfix не вирішує це для вас, додайте поля до неплаваючого брата або сестри, що є / відповідає ширині плаваючого брата або сестер.

— Уолф
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.