Kaedah rujukan dan kaedah aplikasi kedudukan mutlak

Kaedah rujukan dan aplikasi kedudukan mutlak

Kedudukan Mutlak (Kedudukan Mutlak) ialah kaedah susun atur yang biasa digunakan dalam CSS, dengan menentukan kedudukan elemen berbanding dengan elemen induk bukan statik (kaedah penentududukan lalai) terdekatnya atau dokumen Ke kedudukan. Menggunakan kedudukan mutlak, elemen boleh diletakkan di mana-mana lokasi tanpa dipengaruhi oleh elemen lain, memberikan susun atur yang lebih fleksibel.

Kaedah rujukan kedudukan mutlak
Dalam CSS, elemen kedudukan mutlak mempunyai ciri berikut:

1. Elemen kedudukan mutlak menentukan kedudukan akhir melalui atribut atas, kanan, bawah dan kiri.
2. Kedudukan elemen berkedudukan mutlak adalah relatif kepada elemen induk atau dokumen tidak kedudukan statik yang terdekat.
3. Jika tiada unsur induk yang tidak berkedudukan statik ditemui, kedudukan elemen yang diposisikan secara mutlak adalah relatif kepada kedudukan dokumen.

Senario aplikasi kedudukan mutlak

1. Susun atur tepat: Kedudukan mutlak boleh memisahkan elemen daripada aliran dokumen dan mencapai kesan susun atur yang tepat. Sebagai contoh, kita boleh menggunakan kedudukan mutlak untuk melaksanakan elemen seperti bar navigasi dan iklan terapung dalam halaman web yang perlu dibetulkan pada kedudukan tertentu dan bukan tatal dengan halaman.
2. Album gambar: Menggunakan kedudukan mutlak, kita boleh mencapai kesan susun atur dalam album gambar. Setiap elemen gambar boleh diletakkan dengan menetapkan atribut kedudukan untuk mencapai kesan peletakan bebas.
3. Kotak modal: Kedudukan mutlak boleh digunakan untuk melaksanakan kotak modal Dengan menetapkan atribut kedudukan kotak modal ke tengah, ia akan sentiasa berada di tengah-tengah halaman dan mengekalkan kedudukan tetap tidak kira bagaimana bar skrol menatal. .
4. Melayang kotak gesaan: Apabila elemen perlu digantung, kotak gesaan akan muncul, yang boleh dicapai dengan menggunakan kedudukan mutlak. Dengan menetapkan sifat kedudukan kotak gesaan, letakkannya secara relatif kepada elemen terapung dan paparkannya.

Contoh kod untuk kedudukan mutlak
Berikut ialah contoh kod untuk kedudukan mutlak dalam beberapa senario aplikasi biasa:

1. Susun letak bar navigasi

HTML:

<nav class="navbar">
  <ul class="navbar-list">
    <li>首页</li>
    <li>关于我们</li>
    <li>产品服务</li>
    <li>联系我们</li>
  </ul>
</nav>

CSS:

.navbar {
  position: absolute;
  top: 20px;
  left: 20px;
}

.navbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-list li {
  display: inline-block;
  margin-right: 10px;
}

CSS: 🜎reee
2. HTML :

<div class="photo-gallery">
  <img  src="photo1.jpg" class="photo"   style="max-width:90%" alt="Kaedah rujukan dan kaedah aplikasi kedudukan mutlak" >
  <img  src="photo2.jpg" class="photo"   style="max-width:90%" alt="Kaedah rujukan dan kaedah aplikasi kedudukan mutlak" >
  <img  src="photo3.jpg" class="photo"   style="max-width:90%" alt="Kaedah rujukan dan kaedah aplikasi kedudukan mutlak" >
  <img  src="photo4.jpg" class="photo"   style="max-width:90%" alt="Kaedah rujukan dan kaedah aplikasi kedudukan mutlak" >
</div>

Salin selepas log masuk

.photo-gallery {
  position: relative;
  width: 500px;
  height: 500px;
}

.photo {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

Atas ialah kandungan terperinci Kaedah rujukan dan kaedah aplikasi kedudukan mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!