Bagaimana untuk Membenarkan Tag Tertentu Mengatasi `overflow: hidden`?

Benarkan Teg Tertentu Mengatasi Limpahan:tersembunyi

Masalah:
Anda mempunyai elemen div dengan ketinggian, lebar dan tetap overflow:hidden property untuk klip mana-mana imej dalaman. Walau bagaimanapun, anda memerlukan satu imej dalam div untuk melangkaui sempadannya.

Penyelesaian:
Untuk mencapai ini, anda boleh meletakkan imej yang melimpah sebagai mutlak dalam bekas induk yang berbeza yang mempunyai kedudukan relatif.

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

/* container with overflow:hidden (no relative position) */
.overflow-wrap {
    overflow: hidden;
    height: 250px;
    width: 250px;
}

/* image to respect overflow */
.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
}

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

Dalam contoh ini, div limpahan-balut mempunyai limpahan:tersembunyi, manakala imej limpahan hormat dalam menghormati sempadan. Walau bagaimanapun, imej tanpa limpahan diposisikan secara mutlak dalam div balut relatif, membolehkannya melangkaui balut limpahan.

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