Lima aturan superposisi untuk superposisi berlapis

Penulis：Eve Cole Waktu Pembaruan：2025-02-06 10:36:27

[Browser yang berpartisipasi dalam tes: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Sistem Operasi: Windows]

Tampaknya banyak siswa bingung mengapa div ini berada di tingkat atas dan div itu berada di tingkat bawah. , menyebabkan Anda tidak menggunakan superposisi lapisan sesuka hati. Namun, efek superposisi dari lapisan sering muncul dalam desain interaktif, jadi kita harus mengendalikannya.

Pertama, mari kita klarifikasi beberapa konsep yang perlu digunakan dalam artikel :

Posisi Statis: Posisi: Statis (nilai default properti posisi).
Posisi Dinamis: Posisi: Relatif atau Posisi: Absolute atau Posisi: Tetap.
Elemen leluhur: elemen apa pun yang berisi elemen ini.
Elemen induk: elemen leluhur yang secara langsung berisi elemen.
Elemen rekan: elemen dengan elemen induk yang umum.

Catatan: Konsep -konsep ini disesuaikan oleh penulis dan hanya digunakan dalam artikel ini.

Mengutip:

Elemen rekan adalah kata yang sangat kritis, dan perlu dijelaskan secara rinci di sini.

Dalam contoh ini, Div#A dan Div#B bukanlah "elemen simultan".

Akhir kutipan

Mari kita lihat lima aturan ini :

Aturan 1: Ketika metode penentuan posisi elemen sejawat adalah sama dan tidak ada pengaturan indeks z, HTML bergantung pada yang terakhir.

Jalankan kotak kode

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns =" htmlp : //www.w3.org/1999/xhtml "> <adap> <meta http-equiv =" konten-tipe "content =" text/html; content = "chomo" /> <tautan rel = "start" href = "http://www.14px.com" title = "home" /> <iteme> aturan 1: Metode penentuan posisi elemen sejawat adalah sama, Dan tidak ada z- saat mengatur indeks, HTML bergantung pada yang terakhir. </title> </head> <style type = "text/css"> Div {font: 12px/1.5 Arial;} Div Strong {Color: #FFFF; {Color:#f00;} /*--- Tentukan bentuk blok ---* / .div1, .div2 {tinggi: 70px; .GrandDiv1, .GrandDiv2 {Padding: 10px; #fcf;} /*--- Tentukan posisi offset dan posisi teks ---* / .grandDiv2 {margin-top: -50px; -mengaya: 85px;} .div2 {margin-top: -20px; 0;} </style> <hody> <h3> Aturan 1: Ketika penentuan posisi teman sebaya sama, dan tidak ada pengaturan indeks z, HTML bergantung pada yang terakhir. </h3> <div class = "Div1">. Div1 {Position: static} </div> <div class = "div2">. Div2 {position.static} </div> <div class = "div1" gaya " = "Posisi: Relatif;">. Div1 {position.relative} </div> <div class = "div2" style = "position: absolute;">. Div2 {position.absolute} </di v> </body > </html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu]

Aturan 2: Ketika elemen yang sama diposisikan secara dinamis dan ada pengaturan indeks-Z, yang dengan nilai indeks z terbesar adalah yang teratas.

Jalankan kotak kode

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns =" htmlp : //www.w3.org/1999/xhtml "> <adap> <meta http-equiv =" konten-tipe "content =" text/html; konten = "chomo" /> <tautan rel = "start" href = "http://www.14px.com" title = "home" /> <itement> aturan 2: Ketika elemen yang sama keduanya diposisikan secara dinamis, di sana adalah ketika mengatur z-index, yang dengan nilai z-index terbesar adalah yang paling penting. </title> </head> <style type = "text/css"> Div {font: 12px/1.5 Arial;} Div Strong {Color: #FFFF; {Color:#f00;} /*--- Tentukan bentuk blok ---* / .div1, .div2 {tinggi: 70px; .GrandDiv1, .GrandDiv2 {Padding: 10px; #fcf;} /*--- Tentukan posisi offset dan posisi teks ---* / .grandDiv2 {margin-top: -50px; -mengaya: 85px;} .div2 {margin-top: -20px; 0;} </style> <hody> <h3> Aturan 2: Ketika elemen yang sama diposisikan secara dinamis dan ada pengaturan indeks z, yang dengan nilai indeks-z terbesar adalah yang tertinggi. </h3> <div class = "div1" style = "Posisi: relatif; z-index: 2;">. Div1 {position.relative; z-index: 2} </div> <div class = "div2" style = "Posisi: relatif; z-index: 1;">. Div2 {position.relative; z-index: 1} </div> </body> </html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu]

Aturan 3: Metode penentuan posisi elemen sebaya berbeda, dan penentuan posisi dinamis adalah prioritas utama.

Aturan 4: Ketika unsur-unsur non-simultan, apa pun dan elemen leluhur mereka tidak memiliki tata letak dinamis, HTML bergantung pada yang terakhir.

Jalankan kotak kode

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns =" htmlp : //www.w3.org/1999/xhtml "> <adap> <meta http-equiv =" konten-tipe "content =" text/html; konten = "chomo" /> <tautan rel = "start" href = "http://www.14px.com" title = "home" /> <itement> aturan 4: elemen non-simultan, siapa saja dan leluhurnya Ketika elemen tidak memiliki tata letak dinamis, HTML bergantung pada yang terakhir. </title> </head> <style type = "text/css"> Div {font: 12px/1.5 Arial;} Div Strong {Color: #FFFF; {Color:#f00;} /*--- Tentukan bentuk blok ---* / .div1, .div2 {tinggi: 70px; .GrandDiv1, .GrandDiv2 {Padding: 10px; #fcf;} /*--- Tentukan posisi offset dan posisi teks ---* / .grandDiv2 {margin-top: -50px; -mengaya: 85px;} .div2 {margin-top: -20px; 0;} </style> <hody> <h3> Aturan 4: Ketika elemen non-simultan, apa pun dan elemen leluhur mereka tidak memiliki tata letak dinamis, HTML bergantung pada yang terakhir. </h3> <div class = "ParentDiv1"> .parentDiv1 {position: staitc} <div class = "div1">. Div1 {position: staitc} </div> </div> <div class = "pare ntdiv2" > <div class = "Div2">. Div2 {Position: STAITC} </Div> .parentDiv2 {position: staitc} </div> <div class = "granddiv1"> .grandDiv1 {position: st aitc} <div class = "ParentDiv1"> .parentDiv1 {position: staitc} <div class = "div1">. Div1 {position: staitc} </div> </div> </div> <div class = "granddiv2"> <div class = = "ParentDiv2"> <Div class = "Div2">. Div2 {Position: staitc} </div> .parentDiv2 {position: staitc;} </div> .grandDiv2 {position: static;} </div> .grandDiv2 {position: static;} </div> </body> </html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu]

Aturan 5 : [Penting] Ketika salah satu elemen non-simultan memiliki posisi dinamis, masing-masing akan mencari elemen leluhur penentuan posisi dinamis ke atas, dan masing-masing dari mereka akan mengambil tingkat elemen leluhur tertinggi (atau diri mereka sendiri) untuk perbandingan .

Kasus 1: Tidak peduli seberapa besar indeks z dari elemen anak, semakin besar elemen induknya.

Kasus 2: Elemen induk lebih rendah, dan elemen anak juga bisa lebih tinggi.

Kasus 1, Kasus 2 dikombinasikan dengan perbandingan yang diperluas.

Jalankan kotak kode
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns =" htmlp : //www.w3.org/1999/xhtml "> <adap> <meta http-equiv =" konten-tipe "content =" text/html; konten = "chomo" /> <tautan rel = "start" href = "http://www.14px.com" title = "home" /> <itement> aturan lima: elemen non-simultan, salah satu atau leluhurnya Ketika unsur -unsur memiliki posisi yang dinamis, mereka akan mencari ke atas untuk penentuan posisi yang dinamis elemen leluhur, dan mengeluarkan tingkat elemen leluhur tertinggi (atau diri mereka sendiri) dari mereka untuk perbandingan. </title> </head> <style type = "text/css"> Div {font: 12px/1.5 Arial;} Div Strong {Color: #FFFF; {Color:#f00;} /*--- Tentukan bentuk blok ---* / .div1, .div2 {tinggi: 70px; .GrandDiv1, .GrandDiv2 {Padding: 10px; #fcf;} /*--- Tentukan posisi offset dan posisi teks ---* / .grandDiv2 {margin-top: -50px; -mengaya: 85px;} .div2 {margin-top: -20px; 0;} </tyle> <hody> <h3> Hukum 5 <strong> (penting) </strong>: Ketika elemen yang tidak mirip, elemen leluhur mereka memiliki penentuan posisi yang dinamis, mereka juga akan terlihat ke atas untuk menemukan leluhur itu Elemen -elemen yang diposisikan secara dinamis ke yang umum sampai tingkat unsur leluhur berikutnya, dan masing -masing memiliki tingkat elemen leluhur tertinggi (atau itu sendiri) untuk perbandingan. </h3> <p> Kasus 1: Tidak peduli seberapa besar z-indeks elemen anak, semakin besar elemen induknya. <p> <div class = "parentDiv1" style = "Posisi: relatif; z-index: 2;"> .parentDiv1 {position: relatif; <strong> z-index: 2 </strong>} <div cla ss = "Div1">. Div1 {position: static} </div> </div> <div class = "parentDiv2" style = "position: relatif; z-index: 1;"> <div class = "div2" style = "Posisi: relatif; z-index: 10000;">. Div2 {Posisi: relatif; <strong> z-index: 10000 </strong>} </div> .parentdiv2 {position: relatif; <stron g> z- Indeks: 1 </strong>} </div> <p> Skenario 2: Elemen induk lebih rendah, dan elemen anak juga bisa lebih tinggi. <p> <div class = "parentDiv1"> .parentDiv1 {position: staitc} <div class = "div1" style = "position: relative;">. Div1 {position: relatif} </d iv> </div> <Div class = "parentDiv2"> <div class = "div2">. Div2 {position: staitc} </div> .parentdiv2 {position: staitc} </div> <p> Skenario 1, Kasus 2 Dikombinasikan dengan Perbandingan yang Diperluas . <p> <div class = "granddiv1" style = "Posisi: relatif; z-index: 3;"> .grandDiv1 {position: relatif; <strong> z-index: 3 </strong>} <div class = " ParentDiv1 "> .parentDiv1 {position: staitc} <div class =" div1 "style =" position: relatif; Strong>} </div> </div> </div> <div class = "granddiv2"> <div class = "parentDiv2" style = "Posisi: relatif; z-index: 4;"> <div class = " Div2 "> .div2 {position: static} </div> .parentdiv2 {position: relatif; <strong> z-index: 4 </strong>} </div> .grandDiv2 {position: static;} </di v > </body> </html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu]

Mengutip:

Faktanya, empat poin pertama adalah dasar, dan hanya poin kelima yang sulit dipahami.

Dalam contoh ini, mari kita bandingkan hubungan kaskade antara Div#a_inner5 dan div#b_inner4.
Sampai tingkat berikutnya dari elemen leluhur div#ab, elemen leluhur div#a_inner5 meliputi: Div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4; Div#B, Div#b_inner1, div#b_inner2, div#b_inner3.
Kemudian menganalisis elemen leluhur mereka yang memiliki posisi dinamis: Div#A_INNER5 elemen leluhur yang berisi posisi dinamis adalah: Div#A, Div#A_INNER3;
Kemudian keluarkan level tertinggi untuk membandingkan: Div#a>#div#b_inner3.

Ketika elemen induk lebih rendah dan elemen anak juga bisa lebih tinggi, ia menggunakan elemen non-peer ketika elemen leluhur memiliki tata letak yang dinamis, perbandingannya tidak ada hubungannya dengan posisi: statis, tetapi elemen leluhurnya dapat dibandingkan melalui posisi html.

Akhir kutipan

Tentu saja, kadang -kadang ada kasus khusus, seperti flash, dan pilih di IE6 yang tidak dapat diblokir.