Bagaimanakah Saya Boleh Meletakkan Elemen Dengan Tepat Dalam Bekasnya Menggunakan CSS?

Letakkan Elemen Berkaitan dengan Bekasnya

Apabila mencipta elemen yang perlu diletakkan dalam bekasnya, CSS menawarkan pilihan fleksibel yang memberikan kawalan yang tepat dan keserasian merentas pelayar.

kedudukan: relatif

• Letakkan elemen relatif kepada dirinya sendiri.
• Elemen dialih keluar daripada aliran biasa dan diimbangi dengan nilai yang ditentukan (atas, kanan, bawah, kiri).
• Tidak menjejaskan reka letak elemen sekeliling.

kedudukan: mutlak

• Letakkan elemen berbanding bekas.
• Secara lalai, bekas itu ialah tetingkap penyemak imbas.
• Jika elemen induk mempunyai kedudukan: relatif atau kedudukan: set mutlak, ia bertindak sebagai induk untuk meletakkannya kanak-kanak.

Contoh:

<div>
<pre class="brush:php;toolbar:false">#container {
  position: absolute;
  border: 1px solid red;
  height: 100px;
}

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

Kod ini meletakkan elemen #kotak 50px dari atas dan 20px dari kiri # elemen kontena, memberikan kawalan tepat ke atas penempatannya dalam bekasnya.