Bagaimanakah Kedudukan CSS Boleh Mencapai Peletakan Elemen Relatif Dalam Bekas?

Penedudukan CSS untuk Peletakan Elemen Relatif

Pencarian anda untuk kaedah penyemak imbas silang, patuh piawai dan boleh diselenggara untuk meletakkan elemen berbanding sudut kiri atas bekas mereka boleh dicapai melalui kedudukan CSS. Mari kita terokai cara melakukannya:

Kedudukan Relatif

Kedudukan CSS: relatif; menetapkan kedudukan elemen berbanding dirinya sendiri. Ia kekal dalam aliran biasa semasa susun atur dan kemudian diimbangi oleh nilai yang ditentukan. Ambil perhatian bahawa elemen lain di sekelilingnya tidak akan beralih bersamanya.

Kedudukan Mutlak

kedudukan: mutlak; meletakkan sesuatu elemen berbanding bekasnya. Secara lalai, bekas ialah tetingkap penyemak imbas. Walau bagaimanapun, jika elemen induk mempunyai kedudukan: relatif atau kedudukan: set mutlak, ia menjadi induk untuk koordinat kedudukan untuk anak-anaknya.

Contoh

Pertimbangkan kod ini:

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

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

<div>

Dalam contoh ini, #kotak diletakkan sepenuhnya dalam #bekas. Tepi atasnya ialah 50px dari bahagian atas bekas dan tepi kirinya ialah 20px dari sebelah kiri bekas.

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