Bagaimanakah Kedudukan Relatif dan Mutlak CSS Boleh Mengawal Peletakan Elemen Dalam Bekas dengan Tepat?

Letakkan Elemen Berkaitan dengan Bekasnya

Dalam reka bentuk web, adalah perkara biasa untuk menghadapi senario di mana anda perlu mengawal dengan tepat reka letak elemen dalam bekas mereka. CSS menawarkan pilihan penentududukan yang berkuasa untuk mencapainya.

Menggunakan Kedudukan Relatif

Kedudukan: sifat relatif meletakkan elemen berbanding kedudukan semasanya dalam aliran. Ini bermakna elemen dikeluarkan daripada aliran tetapi masih mengambil ruang seolah-olah ia berada dalam kedudukan asalnya. Anda kemudiannya boleh menentukan offset menggunakan sifat atas, kanan, bawah dan kiri untuk melaraskan peletakannya.

Menggunakan Kedudukan Mutlak

Untuk kawalan yang lebih tepat, gunakan kedudukan: mutlak . Ini meletakkan elemen relatif kepada bekas induk. Jika induk mempunyai set kedudukan: relatif atau kedudukan: mutlak, elemen akan menggunakan koordinatnya dan bukannya tetingkap penyemak imbas.

Contoh

Berikut ialah contoh kod untuk ditunjukkan kedudukan mutlak:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div>

Dalam contoh ini, div #box diletakkan 50px dari atas dan 20px dari tepi kiri bekas induknya, #container. Bekas itu sendiri ditetapkan kepada kedudukan: relatif untuk mewujudkan konteks kedudukan untuk anak-anaknya.

Pertimbangan Utama

• Keserasian Merentas Penyemak Imbas: Kedudukan relatif dan mutlak disokong secara meluas di semua jurusan penyemak imbas.
• Mod Quirks: Ia berfungsi dalam kedua-dua Mod Quirks dan Mod Standard.
• Kebersihan dan Penyesuaian: Dengan menggunakan sifat penentududukan dan bukannya penggodaman , kod kekal bersih dan lebih mudah untuk disesuaikan.
• JavaScript Tidak perlu: Teknik ini boleh dicapai semata-mata dengan CSS, menghapuskan keperluan untuk JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Kedudukan Relatif dan Mutlak CSS Boleh Mengawal Peletakan Elemen Dalam Bekas dengan Tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!