Lima aturan superposisi

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 17:53:18

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

Tampaknya banyak siswa yang terobsesi dengan masalah mengapa div ini ada di lapisan atas dan div itu ada di lapisan bawah, dan tidak peduli bagaimana mereka mengatur indeks-z, mereka tidak bisa mendapatkannya ke atas Mereka menderita muntah-muntah dan diare, mual dan susah tidur, dan akhirnya mengalami depresi. Namun efek superposisi lapisan sering muncul dalam desain interaksi, jadi kita harus mengendalikannya, kita harus menguasai hukumnya.

Pertama, perjelas beberapa konsep yang perlu digunakan dalam artikel ini :

static positioning: position:static (nilai default atribut position).
Pemosisian dinamis: posisi:relatif atau posisi:mutlak atau posisi:tetap.
Elemen leluhur: elemen apa pun yang mengandung elemen ini.
Elemen induk: Elemen leluhur yang secara langsung memuat elemen ini.
Elemen saudara: Elemen yang berbagi elemen induk yang sama.

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

Kutipan:

Elemen rekan adalah kata yang sangat penting dan perlu dijelaskan secara detail di sini.

Dalam contoh ini, div#a dan div#b bukan "elemen saudara". Hanya elemen seperti div#b dan div#c yang memiliki div#f induk yang sama yang dapat disebut "elemen saudara".

Akhir

kutipan

Mari kita lihat lima aturan ini :

Aturan 1: Ketika elemen saudara diposisikan dengan cara yang sama dan tidak ada pengaturan indeks-z, html akan ditempatkan di atas yang terakhir.

Aturan 2: Ketika elemen saudara diposisikan secara dinamis dan memiliki pengaturan indeks-z, elemen dengan nilai indeks-z yang lebih besar akan didahulukan.

Aturan 3: Ketika elemen saudara diposisikan dengan cara yang berbeda, posisikan secara dinamis di atas.

Aturan 4: Jika elemen non-saudara, salah satu elemen tersebut dan elemen leluhurnya tidak memiliki tata letak dinamis, html akan diutamakan.

Aturan 5 : [Penting] Ketika salah satu elemen non-saudara atau elemen leluhurnya memiliki posisi dinamis, cari elemen leluhur yang diposisikan secara dinamis ke atas pada saat yang sama, dan keluarkan elemen leluhur tingkat tertinggi (atau dirinya sendiri) untuk perbandingan.

Kasus 1: Tidak peduli seberapa besar indeks-z elemen turunan, elemen induk yang lebih besar akan didahulukan.

Kasus 2: Elemen induk ditempatkan di bagian bawah, dan elemen anak juga dapat ditempatkan di atas.

Kasus 1 dan kasus 2 digabungkan dengan perbandingan yang diperluas.

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="penulis" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>Aturan 5: Elemen yang bukan saudara, salah satu atau leluhurnya Ketika suatu elemen memiliki posisi dinamis, ia mencari elemen leluhur yang diposisikan secara dinamis ke atas, dan mengambil elemen leluhur tingkat tertinggi (atau elemen itu sendiri) untuk perbandingan. </title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div kuat { color:#fff; latar belakang:#036; { color:#f00;} /*--- Menentukan bentuk blok---*/ .div1, .div2 { tinggi:70px; lebar:150px; latar belakang:#cff; .grandDiv1, .grandDiv2 { padding:10px; batas:1px padat #060; lebar:174px; latar belakang:#cf9; } .parentDiv1, .parentDiv2 { padding:10px; #fcf; } /*--- Menentukan posisi offset persegi dan posisi teks---*/ .grandDiv2 { margin-top:-50px; margin-left:95px; -kiri: 85px; } .div2 { margin-atas:-20px; margin-kiri:75px; padding-atas:30px tinggi:40px } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDiv2 .div2 { margin: 0;} </style> <body> <h3>Aturan 5<strong>(Penting)</strong>: Ketika salah satu elemen non-saudara atau elemen leluhurnya memiliki posisi dinamis, masing-masing elemen tersebut akan mencari temukan elemen leluhur yang diposisikan secara dinamis pada saat yang sama ke elemen leluhur tingkat berikutnya, dan ambil elemen leluhur tingkat tertinggi (atau dirinya sendiri) untuk perbandingan. </h3> <p>Kasus 1: Tidak peduli seberapa besar indeks-z dari elemen turunan, elemen induk yang lebih besar akan didahulukan. <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static</div> </div> <div class="parentDiv2" style="position:relative; z-index:1;"> <div class="div2" style=" position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div> .parentDiv2{position:relative;<strong>z-index: 1</strong>} </div> <p>Kasus 2: Elemen induk berada di bagian bawah, dan elemen anak juga dapat berada di atas. <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>Kasus 1 dan kasus 2 digabungkan dengan perbandingan yang diperluas. <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong >}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{position:staitc}</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /tubuh></html>
[Ctrl+A Semua tips pemilihan: Anda dapat memodifikasi sebagian kode terlebih dahulu]

Kutipan:

Sebenarnya empat poin pertama adalah dasar, hanya poin kelima yang lebih sulit untuk dipahami. Berikut penjelasan detailnya:

Dalam contoh ini, kami membandingkan hubungan berjenjang antara div#a_inner5 dan div#b_inner4.
Hingga tingkat berikutnya dari elemen leluhur div#ab yang mereka bagikan, elemen leluhur div#a_inner5 meliputi: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4; Elemennya meliputi: div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Kemudian menganalisis elemen dengan posisi dinamis di antara elemen leluhurnya: elemen dengan posisi dinamis di antara elemen leluhur div#a_inner5 adalah: div#a, div#a_inner3 elemen dengan posisi dinamis di antara elemen leluhur div#b_inner4 adalah: div#b_inner3.
Kemudian ambil level tertinggi untuk perbandingan: div#a > #div#b_inner3.

Ketika elemen induk berada di bawah dan elemen anak juga bisa berada di atas, elemen non-saudara digunakan. Ketika elemen leluhur memiliki tata letak dinamis, perbandingannya tidak ada hubungannya dengan posisi: statis, melainkan leluhurnya elemen dapat dibandingkan melalui posisi html.

Akhir kutipan

Tentu saja, terkadang ada kasus khusus, seperti flash dan select di IE6 yang tidak dapat dicakup. Ini adalah situasi yang tidak normal.