tetapan lokasi html

Kedudukan dalam HTML merujuk kepada cara elemen diletakkan dan disusun dalam halaman web. Kedudukan dan penempatan elemen dicapai menggunakan sifat kedudukan dalam CSS.

Dalam CSS, sifat kedudukan mempunyai empat nilai: statik (lalai), relatif, mutlak dan tetap. Kami akan merangkumi setiap nilai ini di bawah.

1. statik
   statik ialah nilai lalai, bermakna elemen dibentangkan mengikut susunan ia muncul dalam HTML. Ini bermakna elemen akan diletakkan dalam kedudukan lalainya melainkan anda menggunakan sifat lain (seperti lebar, tinggi atau jidar) untuk menukar saiz atau jaraknya.
2. relatif
   relatif menggerakkan elemen berbanding kedudukan asalnya. Ia boleh digunakan untuk memindahkan elemen dalam bekas induk tanpa menjejaskan kedudukan elemen lain. Untuk menentukan kedudukan relatif, anda menggunakan sifat kiri, kanan, atas dan bawah.

Kod sampel:

div {
    position: relative;
    left: 30px;
    top: 20px;
}

Kod di atas akan mengalihkan elemen div 30px ke kanan dan 20px ke bawah berbanding kedudukan asalnya.

3. mutlak
   meletakkan mutlak unsur relatif kepada nenek moyang kedudukan terdekatnya. Jika tiada nenek moyang yang diposisikan, elemen tersebut diposisikan secara relatif kepada elemen badan dokumen. Untuk menentukan kedudukan mutlak, anda boleh menggunakan sifat kiri, kanan, atas dan bawah.

Kod sampel:

<div id="container">
  <div id="box"></div>
</div>

#container {
    position: relative;
}
#box {
    position: absolute;
    left: 30px;
    top: 20px;
}

Kod di atas akan mengalihkan elemen kotak 30px ke kanan dan 20px ke bawah berbanding dengan elemen bekas.

4. tetap
   tetapkan kedudukan elemen berbanding dengan kedudukan port pandangan. Bermaksud bahawa elemen sentiasa berada dalam kedudukan yang sama pada skrin tanpa mengira bar skrol. Untuk menentukan kedudukan tetap, anda boleh menggunakan sifat kiri, kanan, atas dan bawah.

Kod sampel:

div {
    position: fixed;
    top: 50px;
    right: 30px;
}

Kod di atas akan meletakkan elemen div di penjuru kanan sebelah atas skrin, 50px dari bahagian atas dan 30px dari sebelah kanan skrin.

Ringkasan:

Dalam HTML, anda boleh meletakkan dan menyusun elemen dengan menggunakan atribut kedudukan yang berbeza. Memahami sifat ini dan kegunaannya yang berbeza akan memberi anda kawalan yang lebih besar ke atas reka letak halaman web anda.

Atas ialah kandungan terperinci tetapan lokasi html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!