Kaedah rujukan dan kaedah aplikasi kedudukan mutlak

WBOY
Lepaskan: 2024-01-23 08:50:06
asal
975 orang telah melayarinya

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk
    CSS: 🜎reee
  1. HTML :
  2. <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
CSS:

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

.photo {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
Salin selepas log masuk
Penempatan mutlak ialah kaedah reka letak yang biasa digunakan dalam CSS dan sesuai untuk banyak senario. Dengan menetapkan atribut kedudukan relatif, elemen boleh diletakkan secara bebas pada halaman untuk mencapai kesan susun atur yang tepat. Dalam pembangunan sebenar, kita boleh menggunakan kedudukan mutlak secara munasabah untuk mencapai pelbagai kesan susun atur halaman web mengikut keperluan khusus.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan