Bagaimanakah Teknik Penentududukan CSS Mencapai Peletakan Elemen Tepat Dalam Bekas?

Menempatkan Elemen Dalam Bekas

Dalam bidang reka bentuk web, selalunya penting untuk meletakkan elemen dalam bekas dengan tepat. Ini boleh dicapai dengan berkesan menggunakan teknik penentududukan CSS. Untuk memahami konsep ini, mari kita terokai dua jenis penentududukan utama:

Kedudukan Relatif

kedudukan: kedudukan relatif sesuatu elemen berbanding dirinya sendiri. Sebaik sahaja elemen ditandakan sebagai kedudukan relatif, ia dialih keluar daripada aliran biasa, membolehkan anda mengimbanginya daripada kedudukan asalnya menggunakan sifat atas, kanan, bawah dan kiri. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kedudukan relatif tidak menjejaskan aliran elemen sekeliling.

Kedudukan Mutlak

kedudukan: kedudukan mutlak elemen berbanding bekasnya. Secara lalai, bekas ialah tetingkap penyemak imbas, tetapi anda boleh menentukan elemen induk untuk berfungsi sebagai bekas dengan menetapkan kedudukan: relatif atau kedudukan: mutlak padanya. Kedudukan mutlak membolehkan anda mengawal lokasi elemen dalam bekasnya dengan tepat menggunakan sifat atas, kanan, bawah dan kiri.

Contoh

Untuk menunjukkan kedudukan mutlak, pertimbangkan coretan kod berikut:

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

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

<div>

Dalam contoh ini, elemen bekas (#container) diberi kedudukan relatif, mencipta bingkai rujukan untuk elemen anaknya (#box). Elemen #box mempunyai kedudukan mutlak, yang membolehkan ia diletakkan 50px ke bawah (atas: 50px) dan 20px ke kanan (kiri: 20px) sudut kiri atas bekas.

Atas ialah kandungan terperinci Bagaimanakah Teknik Penentududukan CSS Mencapai Peletakan Elemen Tepat Dalam Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!