Posisi absolut dan overflow disembunyikan

Kami memiliki dua DIV, satu tertanam di yang lain. Jika DIV luar tidak diposisikan absolut, maka DIV dalam, yang diposisikan absolut, tidak mematuhi limpahan tersembunyi dari DIV luar ( contoh ).

Apakah ada kemungkinan untuk membuat DIV bagian dalam mematuhi limpahan yang tersembunyi dari DIV bagian luar tanpa mengatur DIV bagian luar ke posisi absolut (penyebab yang akan memperbaiki tata letak lengkap kami)? Juga posisi relatif untuk DIV batin kita bukanlah pilihan karena kita perlu "tumbuh" dari tabel TD ( exmple ).

Apakah ada opsi lain?

Membuat luar <div>untuk position: relativedan dalam <div>untuk position: absolute. Itu harus bekerja untuk Anda.

Bagaimana position: relativedengan div luar? Dalam contoh yang menyembunyikan bagian dalam. Ini juga tidak akan memindahkannya dalam tata letaknya karena Anda tidak menentukan bagian atas atau kiri.

Elemen yang benar-benar diposisikan sebenarnya diposisikan mengenai relativeinduk, atau induk relatif terdekat yang ditemukan. Jadi elemen dengan overflow: hiddenharus berada di antara relativedan absoluteelemen yang diposisikan:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Anda hanya membuat divs seperti ini:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Saya harap kode ini akan membantu Anda :)