Menguasai Z-indeks di CSS

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.

Mata Utama:

Atribut

dalam
• mengawal susunan elemen halaman. Ia hanya berfungsi pada unsur -unsur yang nilai atributnya z-index, position atau absolute. relative fixed dengan menetapkan
tanpa memberikan nilai kepada atribut 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>

,

,

,

> 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;}

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
ditetapkan kepada nilai bukan
• . 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>

  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;}

  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 5 dan kotak 1
  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>

  ). 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;}

  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!