Bagaimanakah Saya Boleh Meletakkan Elemen Ditetapkan Secara Menegak dan Mendatar Mutlak Semasa Menatal?

Elemen Kedudukan Ditetapkan Secara Menegak, Mendatar Mutlak

Pengguna mencari penyelesaian untuk butang yang kekal dalam jarak yang ditetapkan dari tepi kanan div, tanpa mengira saiz port pandangan , sambil menatal dengan tetingkap. Ini boleh dicapai menggunakan strategi berikut:

Struktur HTML

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

Penggayaan CSS

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

Inti Utama

• Kedudukan Menegak Tetap: Kedudukan: tetap pada div.fixed memastikannya tatal dengan tetingkap.
• Kedudukan Mendatar Mutlak: Kedudukan mendatar tetap tidak ditetapkan secara langsung. Sebaliknya, ia bergantung pada div pembalut (div.inflow dan pilihan div.positioner) untuk menentukan kedudukannya berbanding div induk.
• Pelarasan Dinamik: Apabila saiz div bekas berubah, butang mengekalkan jarak yang diingini dari tepi kanan.
• Limpahan Pengendalian: Elemen kedudukan tetap dikecualikan daripada konteks limpahan div kontenanya, walaupun dengan limpahan: set sifat tersembunyi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meletakkan Elemen Ditetapkan Secara Menegak dan Mendatar Mutlak Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!