Bagaimana untuk Mencapai Kedudukan Menegak dan Relatif Mendatar Tetap sesuatu Elemen?-tutorial css-php.cn

Bagaimana untuk Mencapai Kedudukan Menegak dan Relatif Mendatar Tetap sesuatu Elemen?

Susan Sarandon

Lepaskan： 2024-12-16 20:38:10

asal

458 orang telah melayarinya

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

Cara Meletakkan Elemen Ditetapkan Secara Menegak Tetapi Relatif Secara Mendatar

Dalam senario ini, kita memerlukan butang yang diletakkan pada jarak tetap dari sebelah kanan bekas, tanpa mengira saiz viewport. Ia juga harus menatal dengan tetingkap, mengekalkan offset menegak dan mendatar yang konsisten. Untuk mencapai ini:

Tentukan div bekas (div.inflow) dengan lebar, ketinggian dan jidar kanan tetap.
Secara pilihan, tambahkan div pembalut (div.positioner) untuk meletakkan elemen tetap secara mendatar dalam bekas.
Buat elemen tetap (div.fixed) dengan lebar yang ditentukan, ketinggian dan jidar atas.
Tetapkan kedudukan: tetap pada elemen tetap untuk melabuhkannya pada port pandangan.
Elakkan daripada menetapkan kiri atau kanan pada elemen tetap. Sebaliknya, gunakan div bekas dan pembalut untuk menetapkan kedudukan mendatar.

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

Nota: Jika lebar bekas tidak tetap, div pembalut (div.positioner) diperlukan untuk menolak elemen tetap ke sebelah kanan bekas.

Penting: Limpahan tetapan: tersembunyi pada bekas tidak mempunyai kesan pada div kedudukan tetap berada di luar sempadannya. Kedudukan tetap secara berkesan mengalihkannya daripada konteks limpahan bekas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kedudukan Menegak dan Relatif Mendatar Tetap sesuatu Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!