Ketahui susun atur kedudukan: daripada statik kepada relatif, mutlak dan tetap

Fahami susun atur kedudukan: daripada statik kepada relatif, mutlak dan tetap, contoh kod khusus diperlukan

Dalam pembangunan web, reka letak adalah bahagian yang sangat penting. Sifat kedudukan CSS mengawal susun atur elemen. Artikel ini akan memperkenalkan empat jenis susun atur kedudukan: statik, relatif, mutlak dan tetap serta menerangkan penggunaan dan kesannya dengan contoh kod tertentu.

1. Kedudukan statik (statik):
   Kedudukan statik ialah kaedah penentududukan lalai bagi elemen Pada masa ini, elemen disusun mengikut aliran dokumen dan tidak akan terjejas oleh kaedah kedudukan lain. Elemen yang diposisikan secara statik tidak boleh diposisikan melalui atribut seperti atas, bawah, kiri, kanan, dsb., kerana ia tidak akan memberi sebarang kesan pada elemen tersebut. Berikut ialah kod sampel untuk kedudukan statik:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

<div class="container">
  静态定位元素
</div>

2. Kedudukan relatif (relatif):
   Kedudukan relatif adalah relatif kepada kedudukan asal elemen dalam aliran dokumen. Dengan menetapkan atribut atas, bawah, kiri dan kanan, anda boleh menentukan offset elemen berbanding kedudukan asalnya. Kedudukan relatif tidak menjejaskan elemen lain, jadi elemen lain tidak akan berubah kedudukan disebabkan kedudukan relatif. Berikut ialah kod sampel untuk kedudukan relatif:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    相对定位元素
  </div>
</div>

3. Kedudukan mutlak (mutlak):
   Kedudukan mutlak diposisikan secara relatif kepada elemen nenek moyang kedudukan terdekat (nilai atribut kedudukan bukan statik). Jika tiada unsur nenek moyang yang diposisikan wujud, unsur yang diposisikan secara mutlak diposisikan secara relatif kepada keseluruhan halaman. Dengan menetapkan atribut atas, bawah, kiri dan kanan, anda boleh menentukan offset elemen berbanding dengan elemen rujukan. Kedudukan mutlak akan menjejaskan kedudukan elemen lain, dan elemen lain akan disusun semula untuk menyesuaikan diri dengan perubahan elemen kedudukan. Berikut ialah kod sampel untuk kedudukan mutlak:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  position: relative;
}

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    绝对定位元素
  </div>
</div>

4. Kedudukan tetap (tetap):
   Kedudukan tetap diletakkan relatif kepada tetingkap penyemak imbas. Dengan menetapkan atribut atas, bawah, kiri dan kanan, anda boleh menentukan offset elemen berbanding tetingkap penyemak imbas. Kedudukan tetap tidak mengubah kedudukan semasa halaman ditatal, jadi ia boleh digunakan untuk mencipta elemen terapung seperti bar navigasi atau iklan. Berikut ialah contoh kod untuk kedudukan tetap:

.container {
  width: 200px;
  height: 2000px;
  background-color: #f2f2f2;
}

.box {
  position: fixed;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    固定定位元素
  </div>
</div>

Melalui contoh kod di atas, kita dapat memahami dengan jelas perbezaan dan penggunaan empat susun atur kedudukan. Kedudukan statik adalah lalai, dan elemen disusun mengikut aliran dokumen. Kedudukan relatif membolehkan anda meletakkan kedudukan relatif kepada kedudukan asal dengan menentukan offset. Kedudukan mutlak akan mempengaruhi kedudukan unsur lain dan perlu merujuk kepada unsur nenek moyang yang berkedudukan. Kedudukan tetap boleh diletakkan secara relatif kepada tetingkap penyemak imbas dan boleh digunakan untuk mencipta elemen terapung.

Menguasai pelbagai cara susun atur kedudukan boleh membantu kami mengawal kedudukan dan susun atur elemen dengan lebih baik, dengan itu meningkatkan reka bentuk dan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci Ketahui susun atur kedudukan: daripada statik kepada relatif, mutlak dan tetap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!