Bagaimana untuk Membetulkan Elemen Secara Menegak dan Meletakkannya Secara Mendatar?

Cara Meletakkan Elemen Ditetapkan Secara Menegak dan Mendatar Mutlak

Dalam pembangunan web, selalunya perlu meletakkan elemen mengikut cara yang kekal konsisten tanpa mengira saiz port pandangan. Satu senario sedemikian adalah untuk menetapkan elemen secara menegak, sambil mengekalkan jarak mendatar tertentu dari elemen lain.

Pertimbangkan cabaran berikut: anda memerlukan butang untuk mengekalkan jarak yang konsisten dari sebelah kanan div bekas. Butang hendaklah kekal pada kedudukan menegak tetap dalam port pandangan, tanpa mengira saiz port pandangan.

Mencapai Kedudukan Yang Diingini

Ini boleh dilakukan dengan menggunakan gabungan kedudukan: tetap dan kedudukan: mutlak, seperti yang ditunjukkan dalam yang berikut kod:

<div class="container">
  <div class="button"></div>
</div>

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

Kunci kepada pendekatan ini terletak pada tidak menetapkan sifat kiri/kanan secara eksplisit untuk elemen .button. Sebaliknya, div bekas dan div tambahan (.positioner) digunakan untuk menetapkan kedudukan mendatar.

Elemen .button mewarisi kedudukan mendatarnya daripada div .container, manakala div .positioner menolak butang . ke arah sebelah kanan div kontena. Dalam contoh ini, elemen .button mengekalkan jarak 15px dari tepi kanan div bekas.

Selain itu, kedudukan menegak tetap elemen .button (atas: 60px) memastikan ia kekal pada lokasi menegak itu dalam port pandangan semasa halaman menatal.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Elemen Secara Menegak dan Meletakkannya Secara Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!