Menguasai Z-indeks di CSS-tutorial css-php.cn

atribut z-indeks dalam CSS: alat yang berkuasa untuk mengawal susunan elemen halaman yang menyusun

Artikel ini meneroka atribut z-index dalam CSS, yang digunakan untuk mengawal urutan cascade elemen halaman. Unsur -unsur dengan nilai yang lebih tinggi akan dipaparkan pada elemen dengan nilai yang lebih rendah. Ini sama dengan paksi-x dan paksi-y pada halaman yang mengawal kedudukan unsur-unsur mendatar dan menegak masing-masing, dan z-index mengawal susunan elemen pada paksi z.

Mastering z-index in CSS

Mata Utama:

Atribut

mengawal susunan elemen halaman. Ia hanya berfungsi pada unsur -unsur yang nilai atributnya z-index, position atau absolute. relative fixed dengan menetapkan

Penghapusan nilai position: relative top dilakukan dalam konteks penyusunan induknya, yang bermaksud bahawa walaupun nilai unsur right adalah tinggi, elemen itu masih boleh dipaparkan di tempat lain jika nilai induknya bottom adalah rendah . left Untuk meningkatkan organisasi dan fleksibiliti, disarankan untuk menggunakan kenaikan 100 untuk menetapkan nilai

. Pendekatan ini menyediakan 99 pilihan berangka yang tersedia apabila menambah lapisan baru antara dua lapisan sedia ada. z-index z-index z-index Pesanan penyusunan lalai

Apabila menulis HTML, unsur -unsur belakang dalam dokumen akan disusun di atas elemen depan secara lalai. z-index

Dalam coretan HTML ini, jika semua elemen ditetapkan untuk bertindih, footer akan disusun di atas kandungan badan, yang seterusnya akan disusun di atas tajuk.

unsur -unsur boleh bertindih dengan menggabungkan atribut

dan

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

Salin selepas log masuk

> atribut mengimbangi. position top Jika atribut right setiap elemen ditetapkan kepada bottom, mereka akan bertindih. Oleh kerana footer muncul terakhir dalam dokumen, ia disusun di atas dua elemen pertama secara lalai. left

Gunakan sifat offset position dan absolute untuk melihat susunan elemen yang lebih jelas.

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

Salin selepas log masuk

Stack Context

top Walaupun elemen bertindih boleh dibuat menggunakan left, ini tidak membuat apa yang dipanggil

stacking context

Konteks penyusunan boleh dibuat dengan cara berikut: position: absolute Elemen mempunyai atribut

atau

, dan nilai

tidak

position: absolute item flexbox mempunyai relative nilai yang tidak z-index. auto Kelegapan elemen
) adalah kurang daripada 1. auto Atribut z-index elemen
. opacity
Cara biasa untuk membuat dan menggunakan konteks penyusunan adalah yang pertama, mari fokus padanya. transform
kembali ke contoh sebelumnya, kami mempunyai tiga elemen yang bertindih antara satu sama lain, tetapi pada masa ini mereka tidak mempunyai nilai z-index.
Atribut
z-index membolehkan kami mengawal susunan susunan.

Jika kita menetapkan footer z-index hingga 1, badan z-index hingga 2, dan header z-index hingga 3, urutan penyusunan lalai dapat diterbalikkan sepenuhnya.

di permukaan nampaknya mudah: semakin tinggi nilai, semakin tinggi unsur -unsur timbunan - jadi z-index akan sentiasa berada di atas z-index: 9999. Malangnya, realiti lebih rumit daripada ini. z-index: 9
z-indeks dalam konteks penyusunan
```
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
```
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Jika anda menambah kotak di dalam bekas
dan letakkannya di luar sudut kanan bawah, kami akan melihatnya duduk di atas kotak hijau, di bawah kotak merah jambu. site-content
```
.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
```
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Berdasarkan apa yang kita tahu tentang
, kita mungkin berfikir bahawa untuk membuat kotak kuning ini muncul di atas kotak merah jambu, kita hanya perlu menetapkan nilai yang lebih tinggi untuk z-index. z-index
Jika kita menetapkan
hingga 4 (di atas z-index), kita tidak akan melihat sebarang perubahan. Orang biasanya cuba memaksa menyusun dengan nombor yang sangat besar (seperti 9999), tetapi ini juga tidak mempunyai kesan. Dilihat dalam asas kod seperti nilai z-index: 3 adalah bau kod, jadi cuba mengelakkannya jika boleh. z-index
Sebab kita tidak dapat mendapatkan hasil yang diharapkan dari kotak kuning yang diletakkan di atas kotak merah jambu adalah cara
berkelakuan dalam konteks penyusunan. z-index
Untuk menunjukkan ini, mari kita lihat contoh yang lebih kompleks yang saya meminjam dari laman web MDN.

... (kod HTML dan CSS dalam contoh MDN ditinggalkan di sini kerana artikel itu terlalu panjang, tetapi bahagian penjelasan utama dikekalkan) ....

Semua ini dapat dijelaskan oleh fakta bahawa semua nilai
dihuraikan dalam konteks penyusunan ibu bapa mereka. Kerana nilai bekas induk z-index adalah lebih tinggi daripada footer, semua elemen kedudukan dalam .site-content dinilai dalam konteks itu. z-index .site-content Memahami susunan unsur -unsur dalam konteks penyusunan, anda boleh membandingkannya dengan kanak -kanak dalam senarai yang diperintahkan bersarang.

ini boleh ditulis seperti berikut:

header:
- z-index: 5 Subjek:
- z-index: 4 Kotak 1:
  - z-index: 4.6 Kotak 2:
  - z-index: 4.1 Kotak 3:
  - z-index: 4.3
  footer:
- z-index: 2 Oleh itu, walaupun header
adalah 6, perintah renderingnya adalah 4.6, yang masih kurang dari 5. Oleh itu, kotak 1 dipaparkan di bawah tajuk.
z-index Ia agak mengelirukan pada mulanya, tetapi dengan amalan ia benar -benar mula masuk akal! z-index
z-indeks hanya sesuai untuk elemen kedudukan
Jika anda ingin mengawal susunan elemen susunan, anda boleh menggunakan z-index. Walau bagaimanapun, position hanya akan berkuat kuasa apabila nilai absolute elemen adalah relative, fixed atau z-index.

Meletakkan elemen dengan tepat dengan position sangat bagus untuk membina susun atur kompleks atau corak UI yang menarik, tetapi sering diinginkan untuk mengawal perintah penyusunan tanpa menggerakkan unsur -unsur dalam kedudukan asal pada halaman.

Jika ini berlaku, anda boleh menetapkan hanya position: relative tetapi tidak memberikan nilai apa -apa untuk top, right, bottom atau left. Unsur ini akan kekal dalam kedudukan asalnya pada halaman, aliran dokumen tidak akan terganggu, dan nilai z-index akan berkuatkuasa.

nilai z-indeks negatif boleh digunakan

Unsur terhidrat sering digunakan untuk membina bentuk kompleks atau komponen UI. Ini biasanya bermakna bahawa unsur -unsur ditumpukan pada satu sama lain dan nilai z-index terus meningkat. Untuk meletakkan elemen di bawah elemen lain, ia hanya perlu mempunyai nilai z-index yang lebih rendah, yang boleh menjadi negatif. Ini berguna apabila menggunakan elemen pseudo dan ingin meletakkannya di belakang kandungan elemen induknya.

Oleh kerana cara menyusun konteks berfungsi, jika elemen
atau
akan diposisikan selepas kandungan teks elemen induknya, nilai negatif :before perlu ditetapkan di atasnya. :after z-index strategi z-indeks

mari kita meringkaskan strategi mudah yang saya gunakan semasa memohon
dalam projek saya.
z-index Kami menggunakan kenaikan satu angka nilai
, tetapi bagaimana jika kita mahu menambah elemen baru antara kedua-dua elemen yang ditetapkan ke
dan z-index? Anda perlu menukar banyak nilai- mungkin di seluruh pangkalan kod, yang boleh menyebabkan masalah dan boleh menyebabkan CSS pecah di bahagian lain laman web. z-index: 3 z-index: 4 Tetapkan z-indeks dengan 100 langkah

Apabila berurusan dengan
, anda sering melihat kod seperti ini:
z-index
Ia kelihatan buruk pada pendapat saya (dan hanya menjadi lebih teruk selepas melampirkan
```
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
```
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
). Melihat nilai sedemikian biasanya menunjukkan bahawa pemaju tidak memahami konteks penyusunan dan cuba memaksa satu lapisan berada di atas yang lain.
!important Daripada menggunakan mana -mana nombor seperti 9999, 53 atau 12, kita boleh sistematisasi nisbah
kami dan membawa lebih banyak pesanan ke proses. Ia bukan hanya kerana saya mempunyai pemaju gangguan obsesif-kompulsif. Serius.
z-index Saya tidak menggunakan kenaikan angka tunggal
, tetapi 100 kenaikan.
z-index
Saya melakukan ini untuk menyimpan perkara yang teratur, dan juga melihat banyak lapisan yang digunakan dalam projek ini. Manfaat lain ialah jika anda perlu menambah lapisan baru antara dua lapisan lain, anda boleh memilih antara 99 nilai yang berpotensi.
```
.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
```
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Pendekatan manual ini sangat dipercayai apabila membina sistem, tetapi apabila digunakan bersama dengan preprocessor seperti SASS, ia boleh dibuat lebih fleksibel.

... (bahagian Soalan Lazim ditinggalkan di sini kerana ia lebih berulang -ulang dengan output sebelumnya) ... z-index

Atas ialah kandungan terperinci Menguasai Z-indeks di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!