Posisi absolut di dalam posisi absolut


92

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.


Itu benar-benar sesuatu yang saya cari dan jawaban atas pertanyaan Anda ini membuat mata saya terbuka: \.
Benjamin

absolute: Elemen diposisikan relatif terhadap elemen leluhur yang diposisikan pertama (bukan statis)
Oswaldo Zapata

Jawaban:


95

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.


Jadi pada dasarnya posisi absolut menjadi posisi relatif untuk anak yang diposisikan absolut?
pufos

@pufos jenis. The 0px / 0pxposisi untuk anak-anak mendapat ulang olehposition: absolute
Pekka

25
@pufos Saya pikir Anda sedikit membingungkan ini. position:relativeartinya elemen akan diposisikan (menggunakan atas, kanan, kiri bawah) secara relatif dari posisinya saat ini. position: absoluteberarti itu akan diposisikan relatif terhadap jendela browser atau induk pertama dengan position: absoluteatau position: relative.
seler

Bisakah Anda membagikan referensi online ini? Karena saya tidak dapat menemukan ... Dan ... Terima kasih banyak
pufos

2
@pufos referensi yang paling mendasar ada di sini: w3.org/TR/CSS2/visuren.html#choose-position
Pekka

27

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 .


Saya ingin div ke-3 diposisikan secara absolut ke div posisi absolut tetapi saya tidak tahu apakah ini standar (crossbrowser) .. dan saya tidak dapat menemukan spesifikasi secara online ... Terima kasih banyak
pufos


@MikeTunnicliffe absolut berarti elemen diposisikan relatif terhadap posisi pertamanya: tetap juga
Trần Kim Dự

15

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.


4

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 */

2
my-wrapper mungkin harus .my-wrapper
jdavid.net

Pendekatan ini luar biasa, saya masih tidak tahu mengapa itu menyelesaikan masalah saya. Masalah saya adalah saya tidak bisa menjadikan elemen ketiga saya menjadi anak dari elemen pertama karena beberapa alasan lain.
windmaomao

2

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.


0

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 .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.