Bagaimana untuk Membetulkan Menegak dan Meletakkan Elemen Secara Mendatar Relatif kepada Div?-tutorial css-php.cn

Bagaimana untuk Membetulkan Menegak dan Meletakkan Elemen Secara Mendatar Relatif kepada Div?

Patricia Arquette

Lepaskan： 2024-12-01 12:01:11

asal

475 orang telah melayarinya

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

Cara Meletakkan Elemen Tetap Menegak dan Mendatar Mutlak

Masalah:

Seorang pengguna berusaha untuk mencipta butang yang mengekalkan jarak menegak tetap dari port pandangan sambil mengekalkan jarak tertentu dari tepi kanan div, tanpa mengira saiz port pandangan.

Penyelesaian:

Kedudukan Mendatar:

Walaupun kedudukan "mendatar mutlak" tidak boleh dicapai secara teknikal dengan penyelesaian yang disediakan, matlamat untuk mengekalkan jarak tetap dari tepi kanan div boleh bertemu. Dengan mengelak daripada menetapkan sifat kiri atau kanan untuk elemen tetap mendatar, div bekas digunakan untuk mengawal kedudukan mendatarnya.

Kedudukan Menegak:

Elemen diposisikan tetap menegak menggunakan kedudukan: harta tetap. Dengan menetapkan nilai teratas, kedudukan menegak dikekalkan tanpa mengira saiz port pandangan.

Sampel Kod:

Kod berikut menunjukkan pelaksanaan:

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

Salin selepas log masuk

CSS:

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

Salin selepas log masuk

Pertimbangan Utama:

Div .positioner div mungkin tidak diperlukan jika div.inflow div mempunyai lebar tetap, membenarkan penetapan terus bagi jidar kiri elemen tetap.
Limpahan tetapan: tersembunyi pada div kontena tidak menjejaskan kedudukan elemen tetap di luar sempadannya.

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