Posisi absolut di dalam posisi absolut

Saya memiliki 3 divelemen.

Pertama divlebih besar (bungkus) dan memilikiposition:relative;

divPosisi kedua diposisikan absolut ke divposisi relatif pertama (dan termasuk dalam posisi pertama div)

Posisi ketiga divada di urutan kedua divdan juga memiliki posisi absolut.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Mengapa divposisi ke-3 mutlak dari ke-2 div(yang juga merupakan posisi mutlak ke-1 div) dan bukan ke-1 divyang memiliki posisi relatif?

Karena posisi ke-3 divadalah posisi absolut dan posisi ke-2 mutlak div.

Karena position: absolutemengatur ulang posisi relatif untuk anak-anak seperti position: relativehalnya.

Tidak ada jalan lain - jika Anda ingin yang ketiga divdiposisikan secara absolut secara relatif terhadap yang pertama, Anda harus menjadikannya anak dari yang pertama.

Keduanya position:relativedan position:absolutemenetapkan elemen yang mengandung sebagai assesor posisi.

Jika Anda membutuhkan div 3 untuk diposisikan berdasarkan div 1, jadikan itu turunan langsung dari div 1.

Perhatikan bahwa position: relativeberarti elemen diposisikan relatif terhadap posisi aslinya dan position: absoluteberarti elemen diposisikan relatif terhadap yang pertama position:relativeatau position:absoluteleluhurnya .

Posisi statis: posisi statis adalah cara default sebuah elemen akan muncul dalam aliran normal file HTML Anda jika tidak ada posisi yang ditentukan sama sekali.

Penting: top, right, bottomdan leftsifat TIDAK MEMILIKI PENGARUH A statis DIPOSISIKAN ELEMEN.

Posisi relatif: memposisikan elemen dengan nilai relatif membuat elemen (dan ruang yang ditempati) dalam aliran normal file HTML Anda.

Anda kemudian dapat memindahkan elemen dengan beberapa jumlah menggunakan properti left, right, topdan bottom. Namun, hal ini dapat menyebabkan elemen tersebut tumpang tindih dengan elemen lain yang ada di halaman — yang mungkin merupakan efek yang Anda inginkan atau tidak.

Elemen yang diposisikan secara relatif dapat berpindah dari tempatnya, tetapi ruang yang ditempati tetap ada.

Posisi absolut: menerapkan nilai posisi absolut ke suatu elemen akan menghilangkannya dari aliran normal. Saat Anda memindahkan elemen posisi absolut, titik referensinya adalah bagian atas / kiri dari elemen penampung terdekat yang memiliki posisi yang dinyatakan selain statis — juga disebut konteks pemosisian terdekatnya. Jadi, jika tidak ada elemen yang mengandung dengan posisi selain statis, maka itu akan diposisikan dari sudut kiri atas elemen tubuh.

Dalam kasus Anda, wadah berisi ketiga terdekat adalah ke-2.

Namun jawaban klarifikasi lainnya.

Skenario Anda saat ini adalah ini:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Dan Anda agak berjuang dengan itu.

Jika Anda dapat mengubah HTML, cukup lakukan ini:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Alasan mengapa divelemen ke-3 benar-benar diposisikan ke divelemen ke-2 adalah karena seperti yang dijelaskan spesifikasi CSS di sini , adalah karena elemen "induk" (lebih baik dikatakan: mengandung blok) dari elemen yang diposisikan secara absolut belum tentu elemen induk langsungnya, tetapi lebih tepatnya elemen yang diposisikan langsung yaitu setiap elemen yang posisinya diatur ke apa pun kecuali staticsebagai contohposition: relative/absolute/fixed/sticky;

Oleh karena itu, jika memungkinkan dalam kode Anda, jika Anda ingin divelemen ke-3 diposisikan secara mutlak sehubungan dengan yang pertama, divAnda harus membuat divelemen ke-2 Anda sebagai position: static;nilai defaultnya (atau cukup hapus position: ...deklarasi apa pun dalam set aturan divelemen ke-2 Anda ) .

Hal di atas akan membuat blok pertama divyang berisi blok ketiga benar-benar diposisikan div, mengabaikan blok ke -2 divuntuk tujuan pemosisian ini.

Semoga membantu.

Jika ada yang masih mencari jawaban untuk ini.

Saya bisa mencapai hasil ini dengan menambahkan clear: both;gaya ke div yang benar-benar diposisikan pertama yang mengatur ulang anak dan mengizinkannya menggunakan absoluteposisinya sendiri .