Bagaimana untuk Membenarkan Elemen Melimpahi Bekas dengan `overflow: hidden`?

Kawalan Limpahan Bekas untuk Elemen Tertentu

Anda mungkin menghadapi situasi di mana anda mempunyai bekas dengan dimensi ketinggian dan lebar tertentu serta limpahan:tersembunyi untuk menyembunyikan mana-mana unsur yang melebihi sempadannya. Walau bagaimanapun, anda juga mungkin mahu membenarkan elemen tertentu dalam bekas melangkaui sempadan ini.

Untuk mencapai matlamat ini, gunakan pendekatan mengekalkan elemen limpahan:tersembunyi dengan kedudukan:statik dan meletakkan elemen limpahan berbanding dengan induk yang lebih tinggi (bukannya limpahan:induk tersembunyi) terbukti berkesan. Contohnya:

<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}

.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div></code>

Dalam contoh ini, div .relative-wrap berfungsi sebagai induk yang lebih tinggi dengan kedudukan: relatif. Dalam .relative-wrap, div .overflow-wrap (dengan limpahan:tersembunyi) diletakkan dengan position:static. Elemen limpahan (dalam kes ini, .respect-overflow dan .no-overflow) kemudiannya diletakkan secara relatif kepada .relative-wrap (elemen datuk nenek mereka) menggunakan kedudukan: relatif untuk .respect-overflow (yang menghormati sempadan .overflow- balut) dan kedudukan: mutlak untuk .tiada limpahan (yang boleh melangkaui sempadan kontena).

Pendekatan ini secara berkesan membolehkan anda mempunyai elemen dalam bekas dengan limpahan:tersembunyi yang boleh menonjol melepasi sempadannya, memberikan anda lebih fleksibiliti dalam reka letak dan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana untuk Membenarkan Elemen Melimpahi Bekas dengan `overflow: hidden`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!