Rumah > Artikel > hujung hadapan web > Perbezaan antara auto, 0 dan tiada indeks-z

Perbezaan antara auto, 0 dan tiada indeks-z

WBOYke hadapan: 2023-08-31 23:41:08687semak imbas

auto、0 和无 z-index 之间的区别

Kedudukan elemen dalam halaman web ialah atribut penting yang diberikan oleh pembangun. Jika elemen anda tidak diletakkan dengan betul, maka ia mungkin kelihatan tidak masuk akal atau tidak teratur. Oleh itu, adalah sangat penting bagi pembangun untuk memperuntukkan kedudukan setiap elemen HTML dengan bijak.

Kadangkala elemen mungkin bertindih walaupun telah diberikan jawatan masing-masing. Elemen bertindih ini boleh disusun di atas satu sama lain dan menyembunyikan elemen lain. Untuk menyelesaikan masalah ini, CSS menyediakan sifat z-index untuk reka bentuk web. Dalam artikel ini, kita akan belajar tentang sifat z-index CSS. Kami juga akan membincangkan nilai-nilai indeks z yang berbeza dan perbezaan di antara mereka.

Apakah atribut indeks-z?

Sifat z-index CSS membolehkan pembangun menentukan susunan elemen yang bertindih pada paksi z (iaitu pada skrin atau di luar skrin). Walau bagaimanapun, atribut z-index hanya berfungsi pada elemen yang mempunyai nilai kedudukan selain daripada statik yang ditentukan.

Tahap tindanan elemen HTML ditentukan oleh atribut z-index. Kedudukan elemen pada paksi-Z dipanggil "tahap tindanan" (berbanding dengan paksi-X atau paksi-Y). Jika nilai lebih tinggi, elemen akan diletakkan lebih dekat ke bahagian atas susunan susun. Susunan susun ini berserenjang dengan viewport atau monitor.

Susunan penyusunan semula jadi komponen pada paksi Z dalam halaman HTML dipengaruhi oleh pelbagai faktor. Ini ialah elemen dengan konteks tindanan negatif, unsur tidak diposisikan, tidak terapung, tahap blok, unsur terapung tidak diletakkan, unsur sebaris dan unsur kedudukan, semuanya dalam susunan paparan.

Tatabahasa

element{
   z-index: values;
}

Berikut ialah nilai atribut ini -

Auto - Pesanan bertindih adalah sama dengan nilai ibu bapa. Ini ialah nilai lalai.
Nombor- Urutan bertindih ditentukan sebagai nombor, seperti 1, 2, 3, dsb.
Awal - Pesanan ditetapkan kepada lalai.
Warisan - Susunan bertindih diwarisi oleh unsur induk.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 2;
         width: 200px;
      }
   </style>
</head>
<body>
   <center>
      <h2> z-index property </h2>
      <div class= "demo1"> This is an example. </div>
      <div class= "demo2"> This is an example. </div>
   </center>
</body>
</html>

Nilai automatik untuk atribut indeks-z

Nilai auto atribut indeks-z ialah susunan elemen yang sama dengan elemen induk.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Auto value of z-index property</title>
   <style>
      .demo1{
         font-family: verdana,'cursive';
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
         z-index: auto;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 200px;
         z-index: auto;
      }
   </style>
</head>
<body>
   <center>
      <h2>z-index property</h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
   </center>
</body>
</html>

Nilai sifar untuk atribut indeks-z

Nilai sifar atribut indeks-z ialah nilai berangka bagi susunan elemen. Tentukan nilai indeks-z 0 untuk membuat kandungan bertindan. Sebagai contoh, jika kita mempunyai dua elemen elemen1 dan elemen2, indeks-z mereka ialah 1 dan 0 masing-masing. Oleh itu, elemen 1 akan disusun di atas elemen 2. Dan jika indeks-z mereka ialah -1 dan 0 masing-masing, elemen 1 akan disusun di bawah elemen 2. Pertimbangkan contoh berikut.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Zero value of z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: #FF0000;
         position: absolute;
         top: 120px;
         z-index: 0;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 0;
         width: 200px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>z-index property</h2>
   <p class= "demo1">This is an example.</p>
   <p class= "demo2">This is an example.</p>
</body>
</html>

Atribut

z-index tidak mempunyai nilai

Nilai atribut indeks-z biasanya tidak akan sama dengan nilai auto.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>No value for z-index property</title>
   <style>
      .demo{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
      }
   </style>
</head>
<body>
   <h2>z-index property</h2>
   <p class= "demo">This is an example.</p>
</body>
</html>

Kesimpulan

Topik yang mencabar ialah menyusun konteks dalam CSS. Dalam artikel ini, kami menerangkan secara menyeluruh cara menyusun konteks pada halaman web dipengaruhi oleh z-index, yang, apabila difahami sepenuhnya, diterjemahkan ke dalam sifat CSS yang berkuasa. Memandangkan mereka sudah biasa dengan ciri ini, pembangun baharu seharusnya dapat menggunakannya dengan berkesan dan mengelakkan beberapa masalah biasa yang boleh berlaku. Pembangun lanjutan juga harus lebih sedar tentang cara aplikasi z-index yang betul boleh menyelesaikan pelbagai cabaran reka letak dan menyediakan pelbagai pilihan reka bentuk CSS kreatif.

Atas ialah kandungan terperinci Perbezaan antara auto, 0 dan tiada indeks-z. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html Static auto 继承栈堆

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Apakah kegunaan Escape dalam KURANG?Artikel seterusnya：Apakah kegunaan Escape dalam KURANG?

Artikel berkaitan

Lihat lagi