Bezakan antara kedudukan melekit dan kedudukan tetap

王林
Lepaskan: 2024-02-18 22:42:22
asal
607 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.

  1. 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.

  1. 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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!