Adalah disyorkan untuk mempunyai pemahaman yang mendalam tentang kedudukan kedudukan dan atribut indeks-z dalam pertukaran CSS_Experience

Pengarang: Cutsin
Alamat asal: http://www.moonless.net/blog/2007/09/csspositionz-index.html

Nota: Artikel ini adalah untuk tujuan komunikasi sahaja tidak sesuai, dialu-alukan Mengkritik dan membetulkan, tetapi sila nyatakan sebabnya, terima kasih!

Memandangkan saya biasanya tidak menggunakannya, saya mempunyai pemahaman yang samar-samar tentang nilai mutlak dan relatif atribut kedudukan semasa saya menulis CSS pada masa lalu, dan saya lebih keliru tentang cascading z-index Selain faktor pemahaman, setiap hasil penghuraian yang berbeza merentasi pelayar juga merupakan masalah besar. Saya membaca dokumen CSS dengan teliti hari ini dan akhirnya mempunyai pemahaman yang lebih mendalam tentang terapung dan kedudukan model kotak.

Kami berkemungkinan besar menghadapi masalah seperti ini dalam amalan:
1 Buat navigasi mendatar, dan kemudian menu lungsur turun muncul selepas tetikus melepasinya, kemudian kawalan kedudukan drop- ini. menu bawah ialah kunci;
2 Kami mahu meletakkan beberapa gesaan gelembung terapung pada halaman ke dalam reka letak halaman biasa Pada masa ini, kami tidak mahu gesaan gelembung memusnahkan reka letak dokumen biasa, tetapi kami juga melakukannya tidak mahu gesaan gelembung diletakkan di mana-mana dalam pelayar yang berbeza Terapung secara rawak.
3. Apabila kami memasukkan ikon kecil ke dalam teks biasa, kami biasanya menggunakan teg penjajaran menegak, atau menggunakan ketinggian + garis-ketinggian objek induk, ia akan sentiasa kelihatan berbeza dalam penyemak imbas yang berbeza.

Nah, adakah anda juga pernah mengalami masalah di atas? Jika anda belum mempunyai penyelesaian yang baik, anda mungkin ingin meneruskan membaca artikel ini, mungkin membantu anda:)
Mari kita lihat beberapa definisi nilai atribut kedudukan:
kedudukan : statik, mutlak, relatif

statik : Nilai lalai. Jika atribut kedudukan tidak ditentukan, objek HTML yang menyokong atribut kedudukan lalai kepada statik Ia boleh difahami seperti ini: anggap halaman HTML sebagai strim dokumen, dan kedudukan jujukan setiap teg dalam kod sumber ialah pembentangan. susunan objek sepadan mereka. Semua Objek dengan nilai statik diberikan dalam susunan tag html yang anda tulis.
Seperti yang ditunjukkan dalam rajah di bawah, ini ialah navigasi mendatar biasa dengan float:left; 0.7; this.style.cursor='hand'; this.alt='Klik di sini untuk membuka tetingkap baharunCTRL+Roda tetikus untuk mengezum masuk/keluar';}" onclick="if(!this.resized) {return true;} lain {window.open(this.src);}" alt="" src="http://lh6.google.com/cutsin/RuUJqZ6TMOI/AAAAAAAABuo/v0kyBUwGxOk/s400/css_position_1.gif" onload="if(this .width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Klik di sini untuk membuka tetingkap baharunCTRL+Roda tetikus untuk zum masuk/keluar';}" =0>



Prompt a: Su Yu's Manual CSS2.0 menyebut bahawa perbezaan antara bar skrol kedudukan relatif dan mutlak adalah tidak mutlak Sekurang-kurangnya dalam Firefox, Opera dan Safari, bar skrol masih akan muncul : Atribut z-index yang nilai atributnya ialah objek mutlak boleh menetapkan susunan paparan melata, yang berkesan secara langsung
dan atribut z-index yang nilai atributnya ialah objek relatif mesti ditetapkan dengan teliti semasa menetapkannya. Tukar z-indeks objek semasa Menetapkannya kepada -1 tidak akan berfungsi, ia tidak akan dipaparkan dalam Firefox (perhatikan, ini tidak bermakna penyemak imbas itu salah, tetapi ini bermakna jika objek induk adalah akarnya. badan elemen, maka indeks-z adalah tidak sah, dan sebarang tetapan indeks-z akan Ia tidak akan dipaparkan selepas elemen akar Selain pepijat penghuraian IE (terima kasih kepada petua #19), ia mesti ditetapkan ke atas 0. Jika. kita mahu objek lain menyekatnya, kita hanya boleh menetapkan kedudukan objek lain kepada relatif dan z- Cuma ambil nilai yang lebih besar untuk atribut indeks
Saya tidak tahu bahawa ungkapan di atas mungkin tidak sangat jelas. Anda masih perlu melakukannya sendiri untuk memahaminya
Nampaknya di atas adalah jawapannya keperluan reka bentuk;
Terdapat banyak penyelesaian untuk masalah 1. Saya secara peribadi mengesyorkan menggunakan semantik dl, dt, dd untuk mencapainya, dan Prestasi kaedah ini pada asasnya sama dalam pelayar yang berbeza (ia telah diuji dalam IE, Firefox , Opera, dan Safari). {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; onclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src= "http://lh5.google.com/cutsin/RuUXtJ6TMRI/AAAAAAABvA /qI7EOQ8e2nU/s800/css_position_4.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width =screen.width*0.7; tetingkap baharuCTRL+Roda tetikus untuk mengezum masuk/keluar';}" border=0>


badan { warna:#fff; saiz fon:12px; } ulli { float:left; ketinggian:30px; warna latar belakang:#99CC99; jidar:0 10px; padding:0; sempadan:1px pepejal #c30; lebar: 100px; } ullidiv{ sempadan:1px pepejal #f00; warna latar belakang:#996666; lebar: 100px; ketinggian:100px; kedudukan:mutlak; jidar atas:15px; jidar-kiri:-1px; *margin-kiri:-79px; } ullidl, ul li dl dt, ul li dl dd { margin:0; padding:0; } ul li dl dd { sempadan:1px pepejal #f00; warna latar belakang:#996666; lebar: 100px; ketinggian:100px; kedudukan:mutlak; jidar atas:11px; *margin-atas:10px; jidar-kiri:-1px; }

Tajuk - #teks Senarai b<ul> <li>Senarai c<div> </div> </li> <li style="position:relative;">Tajuk - dt</li> <li>Menu lungsur turun - dd</li> <li> <dl> <dt> </dt> <dd></dd> </dl> </li>[Ctrl+A Pilih semua Nota: </ul>Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan ]
Tambahkan contoh, sila Tontonan perbandingan dalam pelayar IE dan bukan IE:

Sekeping teks, sekeping teks, sekeping teks, sekeping teks, sekeping teks, sekeping teks

<style> .main { width:500px; height:500px; background-color:#9cf; } .layer_a, .layer_b, .layer_c, .layer_d { position:absolute; width:100px; height:60px; } .layer_a { background-color:#69c; } .layer_b { background-color:#369; } .layer_c { background-color:#eee; } .layer_d { background-color:#696; } .brd { border:1px solid #c30; margin:1em; } .block { display:block; } </style>Sekeping teks lainSekeping teks lainSekeping teks lain<div class="main"> <div class="brd"> <div class="layer_a"> </div>Perenggan ketiga teks berbeza Perenggan ketiga teks berbeza</div> <div class="brd"> <div class="layer_b"> </div>Perenggan keempat menentukan teks blok</div> <p class="brd"></p> <div class="layer_c"> </div>Perenggan keempat menentukan teks blok<p class="brd block"> <map class="brd block">Perenggan keempat menentukan teks blok<div class="layer_d"></div></map> </p> <dd class="brd">Perenggan keempat menentukan teks blok<div class="layer_a"></div> </dd> <li class="brd">Perenggan keempat menentukan teks blok<div class="layer_b"></div> </li> </div>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Seperti yang anda lihat daripada contoh ini Apabila IE meletakkan elemen blok secara mutlak, jika elemen induk ialah elemen peringkat blok, ia masih akan mewarisi koordinat lokasi asalnya selepas diseret keluar daripada aliran dokumen
Sebaliknya Pelayar IE, pendekatannya ialah: seret keluar Selepas dokumen mengalir, cari terus koordinat unsur induk.