Apakah tiga kaedah penentududukan utama dalam CSS?

CSS ialah salah satu bahasa gaya yang paling biasa digunakan dalam reka bentuk web, yang boleh mengawal reka letak halaman web, gaya, dsb. Kedudukan adalah bahagian yang sangat penting dalam CSS kerana ia membolehkan kita mengawal kedudukan elemen dalam halaman web secara bebas. Terdapat tiga kaedah penentududukan utama dalam CSS iaitu kedudukan statik, kedudukan relatif dan kedudukan mutlak Perbezaan antara mereka akan diperkenalkan satu persatu di bawah.

1. Kedudukan statik

Yang pertama ialah kedudukan statik yang paling mudah. Kedudukan statik (statik) ialah kaedah penentududukan lalai Ia dibentangkan sepenuhnya mengikut aliran dokumen HTML, dan unsur-unsur disusun mengikut susunan aliran dokumen HTML. Kami tidak perlu menetapkan kedudukan statik untuk elemen kerana ia adalah lalai. Berikut ialah contoh kedudukan statik mudah:

<div class="box">
  <p>这是一个 div 元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

Ini ialah elemen div biasa, yang akan diletakkan secara statik Ia akan dibentangkan mengikut aliran dokumen HTML standard dan menduduki halaman lokasi tertentu.

2. Kedudukan relatif

Kedudukan relatif (relatif) diposisikan secara relatif kepada kedudukan awal elemen. Iaitu, jika anda meletakkan elemen berbanding kedudukan awalnya sendiri, ia akan mengalihkan jarak tersebut. Berikut ialah contoh mudah kedudukan relatif:

<div class="box">
  <p>这是一个 div 元素。</p>
  <p class="inner">这是一个内部元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: relative;
  left: 30px;
  top: 20px;
}

Kami menggunakan elemen dalam yang diposisikan relatif kepada elemen div. Kami menetapkan sifat kedudukan relatif, kiri dan atas, supaya elemen bergerak 30px ke kanan dan 20px ke bawah berbanding dengan elemen div. Jadi kita dapat melihat dengan jelas bahawa kedudukan relatif hanya diposisikan secara relatif kepada kedudukan awal elemen, bukan relatif kepada keseluruhan halaman atau elemen induk.

3. Kedudukan mutlak

Kedudukan mutlak (mutlak) diposisikan secara relatif kepada unsur nenek moyang kedudukan terdekat (iaitu unsur moyang yang kedudukannya tidak statik). Jika tiada unsur nenek moyang yang berkedudukan, unsur tersebut akan diposisikan secara relatif kepada unsur badan. Berikut ialah contoh mudah kedudukan mutlak:

<div class="container">
  <div class="box">
    <p>这是一个 div 元素。</p>
    <p class="inner">这是一个内部元素。</p>
  </div>
</div>

.container {
  position: relative;
}

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: absolute;
  right: 30px;
  bottom: 20px;
}

Kami menggunakan bekas luar yang ditetapkan kepada kedudukan relatif. Kami menetapkan sifat kedudukan mutlak elemen dalam, kanan dan bawah, yang menyebabkan elemen bergerak 30px ke kanan dan 20px ke bawah berbanding dengan elemen div. Perhatikan bahawa kami menetapkan atribut kedudukan bekas luar Ini kerana kedudukan mutlak memerlukan objek rujukan Jika atribut kedudukan tiada unsur induk mempunyai nilai bukan statik, elemen akan diposisikan secara relatif kepada elemen badan.

Ringkasan

Ringkasnya, terdapat tiga kaedah penentududukan utama dalam CSS, iaitu kedudukan statik, kedudukan relatif dan kedudukan mutlak. Kedudukan statik ialah kaedah penentududukan lalai, dan elemen disusun mengikut aliran dokumen HTML standard. Kedudukan relatif meletakkan elemen berbanding dengan kedudukan awalnya, manakala kedudukan mutlak meletakkannya secara relatif kepada unsur nenek moyang yang terdekat. Oleh itu, semasa mereka bentuk susun atur halaman web, kita perlu memilih kaedah kedudukan yang berbeza mengikut keperluan untuk mencapai kesan terbaik.

Atas ialah kandungan terperinci Apakah tiga kaedah penentududukan utama dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!