Spraw, aby dziecko było widoczne poza przepełnieniem: ukryty rodzic

100

W CSS overflow:hiddenjest ustawiany na kontenerach nadrzędnych, aby umożliwić rozszerzanie się wraz z wysokością ich pływających dzieci.

Ale ma też inną interesującą funkcję w połączeniu z margin: auto...

Jeśli POPRZEDNIE rodzeństwo jest elementem pływającym, w rzeczywistości pojawi się obok niego. Oznacza to, że jeśli rodzeństwo jest, float:leftto kontener z float:none overflow:hiddenpojawi się po prawej stronie rodzeństwa, bez nowej linii - tak jakby płynął w normalnym przepływie. Jeśli poprzednim rodzeństwem jest, float:rightkontener pojawi się po lewej stronie rodzeństwa. Zmiana rozmiaru tego kontenera pokaże dokładnie, że jest wyśrodkowany pomiędzy pływającymi elementami. Powiedzmy, że jeśli masz dwoje poprzedniego rodzeństwa, jedno float:leftdrugie float:right, pojemnik pojawi się pośrodku między nimi.

Więc oto problem ...

Jak zachować ten typ układu BEZ maskowania dzieci?

Wyszukiwanie w internecie daje mi sposoby na clear:bothpowiększanie i rozszerzanie kontenera ... ale nie mogę znaleźć żadnego alternatywnego rozwiązania, aby utrzymać lewe / prawe wyśrodkowanie poprzedniego dziecka. Jeśli utworzysz kontener, overflow:visiblewówczas kontener nagle zignoruje przepływ układu elementów pływających i pojawi się warstwowo na wierzchu elementu pływającego.

Więc pytanie :

Muszę mieć kontener, overflow:hiddenżeby zachować układ ...

jak mogę to zrobić, żeby dzieci nie były zamaskowane? Potrzebuję ustawić dziecko bezwzględnie względem rodzica poza pojemnikiem.

LUB

W jaki overflow:visiblesposób mogę absolutnie ustawić dziecko względem rodzica poza kontenerem ... JESZCZE zachować przepływ typu float-like-layout-rodzeństwa?

css overflow css-float center hidden marknadal
źródło

Odpowiedzi:

86

Funkcji clearfix„zachowanie układu” można użyć w ten sam sposób overflow: hidden.

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

dodaj class="clearfix"klasę do rodzica i usuńoverflow: hidden;

Frexuz
źródło
Hmm! Sprytne, dopiero teraz z tym eksperymentuję. Obecnie otrzymuję, że wygenerowana zawartość zachowuje się poprawnie, jest zachowywana w przepływie układu, jednak rodzic nadal będzie ją ignorował i nakładał warstwę na elementy pływające. Jest to jednak bardzo dobry pomysł i będę się nim bardziej bawić, aby zobaczyć, czy uda mi się sprawić, by zachowywał się poprawnie i powrócę do głosowania. Dziękuję Ci :).
marknadal
@ user1671639 Twój przykład tak naprawdę nie dotyczy poprawki Clearfix. Potrzebujesz czegoś innego, więc proponuję zadać pytanie dotyczące Twojego problemu.
Frexuz
To nie działa w ten sam sposób, co overflow:hidden w ogóle. Zastosowanie wyraźnego poprawki do nadrzędnego elementu div nie pozwala, aby wszystkie komponenty podrzędne były „zawarte” w tej samej wysokości co element nadrzędny.
Khom Nazid
11

Żadna z opublikowanych odpowiedzi nie zadziałała dla mnie. position: absoluteJednak ustawienie elementu podrzędnego zadziałało.

reflexiv
źródło
18
Ale czy rodzicielski DIV nie maskowałby tego, gdyby wykraczał poza granice rodzica DIV (który ma przepełnienie: ukryty)?
marknadal
9
Afaik tak nie jest, o ile rodzic nie ma pozycji: względnej. Następnie dziecko jest pozycjonowane względem swojego pierwszego umieszczonego (nie statycznego) elementu nadrzędnego, usuwając go ze zwykłego (rodzica) przepływu dom.
Pim Schaaf,
Jeśli rodzic ma pozycję: względną i jej nie wymaga, możesz ją ustawić: pozycja: nieustawiona.
yeahlad
To prawda, że ​​jeśli jest position: fixedlub bezwzględnie ustawione względem czegoś poza rodzicem, co ma visibility: hidden, będzie widoczne. Jednak często trzeba (chcieć) ustawić go względem elementu nadrzędnego, aby był bardziej odporny na zmiany kodu. Wtedy te rozwiązania nie są alternatywą.
ArneHugo
10

To stare pytanie, ale sam je spotkałem.

Mam pół-rozwiązania, które działają sytuacyjnie w przypadku poprzedniego pytania („Dzieci widoczne w przepełnieniu: ukryty rodzic”)

Jeśli nadrzędny element div nie musi być pozycją: względna, po prostu ustaw style potomne na visibility: visible.

Jeśli nadrzędny element DIV musi być pozycją: względną, jedynym możliwym sposobem pokazania dzieci jest pozycja: ustalona. To zadziałało na szczęście w mojej sytuacji, ale wyobrażam sobie, że nie zadziała w innych.

Oto kiepski przykład, po prostu opublikuj go w pliku HTML, aby go wyświetlić. 

<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>
Thomas Davis
źródło
Oto kiepski przykład, po prostu opublikuj go w pliku HTML, aby go wyświetlić. <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: względna;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; width: 200px; overflow: visible; position: bezwzględna; visibility: visible; clear: both; height: 1000px; top: 100px; left: 10px; "> a </div> </div> </div> </code>
Thomas Davis,
4
Dziękuję za próbę odpowiedzi, ale to nie działa, ponieważ ustalona pozycja automatycznie ustawia element względem widoku, co oznacza, że nie porusza się wraz z rodzicem. W rzeczywistości, jeśli masz przewijaną stronę, podczas przewijania pozostanie ona na 10, 10 pikseli.
marknadal
„Jeśli nadrzędny element div musi być pozycją: względną, jedynym możliwym sposobem pokazania dzieci jest pozycja: ustalona”. Dziękuję za to. Miałem popover bubble help, który musiał się przepełnić, mimo że rodzic miał przepełnienie: scroll. Skończyło się na tym, że miałem absolutny div ze względnym wewnętrznym, a następnie stałym obszarem zawartości.
JackMorrissey
Dzięki, to zadziałało dla mnie. Miałem rodzica z pozycją względną i było to potrzebne, ponieważ jego pozycja została ustawiona za pomocą left. Użycie margin-leftzamiast tego przyniosłoby ten sam efekt, więc nie musiałem już używać pozycji względnej.
Felipe Castro
1

W innych przypadkach, jeśli clearfix nie rozwiąże tego problemu, dodaj marginesy do niepływającego rodzeństwa, które jest / są takie same jak szerokość (y) pływającego rodzeństwa (ów).

Walf
źródło