Buat anak terlihat di luar overflow: hidden parent

100

Dalam CSS, overflow:hiddendisetel pada penampung induk untuk memungkinkannya meluas dengan ketinggian turunannya yang mengambang.

Tetapi itu juga memiliki fitur menarik lainnya jika dikombinasikan dengan margin: auto...

Jika SEBELUMNYA saudara kandung adalah elemen mengambang, itu benar-benar akan muncul disandingkan dengannya. Artinya, jika saudara kandung float:leftmaka wadah dengan float:none overflow:hiddenakan muncul di sebelah kanan saudara kandung, tidak ada baris baru - sama seperti mengambang di aliran normal. Jika saudara sebelumnya adalah float:rightmaka wadah akan muncul di sebelah kiri saudara kandung. Mengubah ukuran penampung ini akan menunjukkannya secara akurat di tengah di antara elemen mengambang. Katakanlah jika Anda memiliki dua saudara sebelumnya, satu sama float:leftlain float:right, wadah akan muncul di tengah di antara keduanya.

Jadi, inilah masalahnya ...

Bagaimana cara mempertahankan jenis tata letak itu TANPA menutupi anak-anak?

Googling di seluruh web memberi saya cara tentang cara clear:bothdan memperluas penampung ... tetapi saya tidak dapat menemukan solusi alternatif untuk mempertahankan pemusatan kiri / kanan sebelumnya-anak. Jika Anda membuat penampung, overflow:visiblemaka penampung tersebut tiba-tiba mengabaikan aliran tata letak elemen mengambang dan muncul berlapis di atas elemen mengambang.

Jadi pertanyaannya :

Saya harus memiliki wadah overflow:hiddenuntuk melestarikan tata letak ...

bagaimana caranya agar anak-anak tidak bertopeng? Saya perlu agar anak benar-benar diposisikan relatif terhadap orang tua di luar wadah.

ATAU

Bagaimana caranya overflow:visibleagar saya bisa benar-benar memposisikan anak relatif terhadap induk di luar wadah ... NAMUN melestarikan saudara kandung float-like-layout-flow?

css overflow css-float center hidden marknadal
sumber

Jawaban:

86

Anda dapat menggunakan clearfixto melakukan "pelestarian tata letak" dengan cara yang sama overflow: hidden.

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

tambahkan class="clearfix"kelas ke orang tua, dan hapusoverflow: hidden;

Frexuz
sumber
Hmm! Pintar, saya baru saja bereksperimen dengannya. Apa yang saya dapatkan saat ini adalah bahwa konten yang dihasilkan berperilaku dengan benar, dipertahankan dalam aliran tata letak, namun induk akan tetap mengabaikannya dan melapisi di atas elemen mengambang. Namun, ini adalah ide yang sangat bagus dan saya akan lebih sering bermain dengannya untuk melihat apakah saya bisa membuatnya berfungsi dengan benar, dan kembali untuk memilih. Terima kasih :).
marknadal
@ user1671639 contoh Anda tidak benar-benar berlaku untuk clearfix. Anda memerlukan sesuatu yang lain, jadi saya sarankan Anda memposting pertanyaan tentang masalah Anda.
Frexuz
Ini tidak bekerja dengan cara yang sama seperti overflow:hiddensama sekali. Menerapkan clearfix ke div induk tidak mengizinkan semua komponen anak "dimuat dalam" ketinggian yang sama dengan induknya.
Khom Nazid
11

Tak satu pun dari jawaban yang diposting berhasil untuk saya. Namun, pengaturan position: absoluteuntuk elemen anak berhasil.

refleksiv
sumber
18
Tetapi bukankah DIV induk akan menutupinya jika melampaui batas DIV induk (yang memiliki overflow: tersembunyi)?
marknadal
9
Afaik tidak, selama orang tuanya tidak mempunyai kedudukan: saudara. Kemudian anak diposisikan relatif terhadap elemen leluhur yang diposisikan pertama (bukan statis), mengeluarkannya dari aliran dom reguler (induk).
Pim Schaaf
Jika orang tua memang memiliki posisi: relatif dan tidak memerlukannya, Anda dapat membuatnya menjadi posisi: tidak disetel.
yeahlad
Benar, jika itu position: fixedatau absolut diposisikan relatif terhadap sesuatu di luar induk yang dimilikinya visibility: hidden, itu akan terlihat. Namun, Anda sering perlu (ingin) memposisikannya relatif terhadap induk agar lebih kuat terhadap perubahan kode. Maka solusi ini bukanlah alternatif.
ArneHugo
10

Ini adalah pertanyaan lama, tetapi saya menemukannya sendiri.

Saya memiliki solusi semi yang sesuai untuk pertanyaan sebelumnya ("Anak-anak terlihat dalam luapan: orang tua tersembunyi")

Jika div induk tidak perlu berupa position: relative, cukup setel gaya anak ke visibility: visible.

Jika div induk memang perlu menjadi position: relative, satu-satunya cara yang mungkin saya temukan untuk menunjukkan anak-anak adalah position: fixed. Ini berhasil untuk saya dalam situasi saya cukup beruntung, tetapi saya membayangkan itu tidak akan berhasil pada orang lain.

Berikut adalah contoh jelek yang baru saja dikirim ke file html untuk dilihat. 

<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
sumber
Berikut adalah contoh jelek yang baru saja dikirim ke file html untuk dilihat. <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>
Thomas Davis
4
Terima kasih telah mencoba menjawab, tetapi ini tidak berhasil karena posisi tetap secara otomatis memposisikan elemen relatif terhadap viewport, yang berarti tidak bergerak bersama induk. Faktanya, jika Anda memiliki halaman gulir, itu akan tetap di 10px, 10px saat Anda menggulir.
marknadal
"Jika div induk memang perlu berupa posisi: relatif, satu-satunya cara yang mungkin saya temukan untuk menunjukkan anak-anak adalah posisi: tetap." Terima kasih untuk itu. Saya memiliki gelembung bantuan popover yang perlu meluap meskipun induknya telah meluap: gulir. Saya akhirnya memiliki div absolut, dengan bagian dalam relatif, dan kemudian area konten tetap.
JackMorrissey
Terima kasih, itu berhasil untuk saya. Saya memiliki orang tua dengan posisi kerabat, dan itu diperlukan karena posisinya diatur menggunakan left. margin-leftSebaliknya, menggunakan akan menghasilkan efek yang sama, jadi saya tidak perlu menggunakan posisi relatif lagi.
Felipe Castro
1

Bagi orang lain, jika clearfix tidak menyelesaikannya untuk Anda, tambahkan margin ke saudara non-float yang sama dengan lebar saudara kandung yang mengambang.

Walf
sumber