Analisis sifat menu lungsur CSS: kedudukan dan indeks z

CSS analisis atribut menu lungsur: kedudukan dan indeks-z

Dalam reka bentuk web, menu lungsur ialah komponen yang biasa digunakan untuk Tunjukkan lebih banyak pilihan atau sembunyikan beberapa kandungan. Untuk melaksanakan menu lungsur yang lengkap, adalah sangat penting untuk menguasai sifat kedudukan dan indeks z. Artikel ini akan menganalisis kedua-dua sifat ini secara terperinci dan memberikan contoh kod khusus.

1. Atribut kedudukan
Position ialah atribut penting dalam CSS, digunakan untuk mentakrifkan kaedah penentududukan elemen. Untuk menu lungsur, kaedah penentududukan yang biasa digunakan termasuk kedudukan relatif (relatif) dan kedudukan mutlak (mutlak).

1. Kedudukan relatif (relatif): Letakkan elemen berbanding kedudukan normalnya, masih menempati ruang asal.
   Contoh kod:

   .dropdown-menu {
     position: relative;
   }

2. Kedudukan mutlak (mutlak): Alih keluar elemen daripada aliran dokumen biasa dan letakkannya berbanding dengan elemen nenek moyang kedudukan terdekatnya Diletakkan, relatif kepada blok yang mengandungi asal jika unsur moyang tidak wujud.
   Contoh kod:

   .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
   }

2. atribut z-index
z-index ialah atribut yang digunakan dalam CSS untuk menentukan susunan susunan antara elemen . Dalam menu lungsur, jika anda mahu ia berada di atas elemen lain, anda perlu menggunakan atribut z-index.

1. Tertib tindanan lalai:
2. Tertib susunan lalai bagi unsur-unsur dengan indeks-z yang tidak ditentukan ialah auto, iaitu, ia disusun mengikut susunannya. DOM;# 🎜🎜#
Jika tahap tindanan dua elemen adalah sama, elemen kemudian akan menimpa elemen sebelumnya.
4. Tetapkan susunan tindanan:

   Dengan memberikan menu lungsur turun nilai indeks-z yang lebih besar, anda boleh meletakkannya di atas elemen lain.
   Contoh kod:
   

   .dropdown-menu {
     position: absolute;
     z-index: 9999;
   }

Perlu diambil perhatian bahawa atribut indeks-z hanya sah untuk elemen yang kedudukannya relatif, mutlak atau tetap.

3 Contoh aplikasi komprehensif

Untuk lebih memahami aplikasi kedudukan dan indeks z dalam menu lungsur, kod sampel lengkap diberikan di bawah:
#🎜 🎜 #Kod HTML:

<div class="dropdown">
  <button class="dropdown-toggle">菜单</button>
  <ul class="dropdown-menu">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
  </ul>
</div>

Kod CSS:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: lightgray;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: white;
  border: 1px solid lightgray;
  display: none;
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  list-style: none;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: lightblue;
}

Dalam contoh di atas, bekas (.dropdown) menu lungsur ditetapkan kepada kedudukan relatif dan menu lungsur turun itu sendiri (. menu lungsur turun) diletakkan secara mutlak, dan atribut indeks-z ditetapkan kepada 9999, supaya menu lungsur turun boleh diletakkan di atas elemen lain. Pada masa yang sama, acara tuding tetikus ditambah untuk merealisasikan paparan dan penyembunyian menu lungsur apabila tetikus melayang, dan kesan perubahan warna latar belakang dengan pilihan.

Ringkasan:

Dengan memahami dan menggunakan sifat kedudukan dan indeks z dengan betul, kami boleh mencipta kesan menu lungsur yang cantik dan meletakkannya di atas elemen lain dengan mudah. Kedua-dua sifat ini mempunyai pelbagai kegunaan dalam CSS, bukan hanya terhad kepada menu lungsur. Saya harap artikel ini dapat membantu pembaca menggunakan kedua-dua atribut ini dengan lebih baik dan meningkatkan kesan dan pengalaman pengguna reka bentuk web.

Atas ialah kandungan terperinci Analisis sifat menu lungsur CSS: kedudukan dan indeks z. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!