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?

— marknadal
źródło

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