Bezakan antara kedudukan melekit dan kedudukan tetap-tutorial css-php.cn

Bezakan antara kedudukan melekit dan kedudukan tetap

王林

Lepaskan： 2024-02-18 22:42:22

asal

613 orang telah melayarinya

Bezakan antara kedudukan melekit dan kedudukan tetap

Kedudukan melekit dan kedudukan tetap ialah dua kaedah penentududukan yang biasa digunakan dalam reka bentuk dan pembangunan web. Kedua-duanya membenarkan elemen dibetulkan di lokasi tertentu pada halaman, tetapi dengan cara yang berbeza. Artikel ini akan memperkenalkan secara terperinci perbezaan antara kedudukan melekit dan kedudukan tetap, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

Kedudukan Melekit:
Kedudukan melekit bermaksud elemen boleh dibetulkan pada kedudukan tertentu pada halaman apabila menatal Apabila kedudukan tatal mencapai kedudukan yang ditentukan, elemen akan berhenti menatal dan dibetulkan pada halaman. Kedudukan melekit adalah relatif kepada aliran dokumen Di bawah susun atur aliran dokumen biasa, kedudukan elemen akan berubah dengan menatal. Dalam kedudukan melekit, kedudukan elemen ditentukan oleh atribut seperti atas, bawah, kiri dan kanan.

Berikut ialah kod sampel ringkas yang melaksanakan kesan bar navigasi yang ditetapkan di bahagian atas halaman apabila menatal ke bahagian atas halaman:

<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px 0;
  text-align: center;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<div style="height:500px">
  <p>Scroll down to see the effect</p>
</div>

</body>
</html>

Salin selepas log masuk

Dalam kod di atas, dengan menetapkan atribut kedudukan bagi bar navigasi kepada melekit, dan menetapkan bahagian atas Ia adalah 0, yang mencapai kesan bar navigasi ditetapkan di bahagian atas halaman semasa ia menatal.

Kedudukan Tetap:
Kedudukan tetap bermakna elemen ditetapkan pada kedudukan tertentu berbanding tetingkap penyemak imbas, dan kedudukan elemen tidak akan berubah sama ada ia ditatal atau tidak. Dalam kedudukan tetap, kedudukan elemen ditentukan oleh atribut seperti atas, bawah, kiri dan kanan.

Berikut ialah kod sampel ringkas yang melaksanakan kesan butang terapung yang mempunyai kedudukan tetap di sudut kanan bawah halaman:

<!DOCTYPE html>
<html>
<head>
<style>
.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f44336;
  color: white;
  padding: 16px;
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}
</style>
</head>
<body>

<div class="float-button">+</div>

</body>
</html>

Salin selepas log masuk

Dalam kod di atas, tetapkan atribut kedudukan butang apungan kepada tetap dan tetapkan bahagian bawah kepada 20px , kanan ialah 20px, mencapai kesan butang terapung yang ditetapkan di penjuru kanan sebelah bawah halaman.

Ringkasan:
Kedua-dua kedudukan melekit dan kedudukan tetap boleh mencapai kesan tetap elemen, tetapi kaedah dan kesan penggunaan adalah berbeza. Kedudukan melekit ialah kaedah penentududukan berbanding dengan aliran dokumen Apabila menatal ke kedudukan yang ditentukan, elemen tetap pada halaman adalah kaedah penentududukan relatif kepada tetingkap penyemak imbas tanpa mengira sama ada ia ditatal atau tidak. Mengikut keperluan khusus, anda boleh memilih kaedah penentududukan yang sesuai.

Atas ialah kandungan terperinci Bezakan antara kedudukan melekit dan kedudukan tetap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!