Apakah ciri-ciri kedudukan tetap?

Kedudukan tetap mempunyai ciri-ciri kedudukan relatif kepada port pandangan, tidak menduduki aliran dokumen, tidak terjejas oleh menatal, bermastautin dalam port pandangan, kedudukan tetap dan keserasian yang baik. Pengenalan terperinci: 1. Kedudukan relatif kepada port pandangan diposisikan secara relatif kepada port pandangan, bukan relatif kepada elemen lain dalam aliran dokumen Ini bermakna tidak kira bagaimana halaman menatal, elemen kedudukan tetap akan kekal dalam paparan . Ia tidak menduduki aliran dokumen Elemen kedudukan tetap dipisahkan daripada aliran dokumen dan tidak akan menjejaskan reka letak elemen lain akan mengabaikan elemen kedudukan tetap, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Penedudukan Tetap ialah kaedah penentududukan CSS yang membenarkan elemen dibetulkan pada kedudukan tertentu pada halaman berbanding dengan port pandangan dan tidak menukar kedudukan semasa halaman menatal. Kedudukan tetap mempunyai ciri-ciri berikut:

1 Kedudukan relatif kepada port pandangan: Kedudukan tetap diletakkan secara relatif kepada port pandangan, bukan relatif kepada elemen lain dalam aliran dokumen. Ini bermakna bahawa elemen kedudukan tetap akan kekal pada kedudukan yang ditentukan dalam viewport tidak kira bagaimana halaman itu ditatal.

2. Tidak menduduki aliran dokumen: elemen kedudukan tetap dipisahkan daripada aliran dokumen dan tidak akan menjejaskan reka letak elemen lain. Elemen lain mengabaikan elemen kedudukan tetap dan bertindak seolah-olah ia tidak wujud. Oleh itu, elemen kedudukan tetap tidak menjejaskan kedudukan dan susun atur elemen lain.

3. Tidak terjejas oleh penatalan: elemen kedudukan tetap tidak akan berubah kedudukan semasa halaman menatal. Elemen kedudukan tetap kekal pada kedudukan yang ditentukan dalam port pandangan tidak kira bagaimana pengguna menatal halaman. Ini menjadikan elemen kedudukan tetap sangat berguna untuk mencipta bar navigasi tetap, petua alat terapung, butang kembali ke atas, dsb.

4 Port pandangan kekal: Elemen kedudukan tetap sentiasa kelihatan, tidak kira bagaimana pengguna menatal halaman. Ini menjadikan elemen kedudukan tetap sangat berguna di mana maklumat penting, pengiklanan atau navigasi perlu dipaparkan pada setiap masa. Pengguna boleh mengakses elemen ini pada bila-bila masa tanpa menatal halaman.

5 Kedudukan tetap: Kedudukan elemen kedudukan tetap adalah relatif kepada port pandangan Anda boleh menentukan kedudukan elemen berbanding port pandangan dengan menetapkan atribut seperti atas, bawah, kiri dan kanan. Dengan cara ini, anda boleh mengawal dengan tepat kedudukan elemen kedudukan tetap supaya ia muncul di tempat yang anda harapkan.

6 Keserasian yang baik: Kedudukan tetap disokong secara meluas dalam penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Untuk penyemak imbas yang tidak menyokong kedudukan tetap, elemen dipaparkan mengikut aliran dokumen biasa.

Kaedah menggunakan kedudukan tetap adalah sangat mudah Anda hanya perlu menetapkan atribut kedudukan elemen kepada tetap. Pada masa yang sama, anda juga perlu menentukan kedudukan elemen dalam viewport Anda boleh menggunakan atribut seperti atas, bawah, kiri dan kanan untuk menentukan nilai offset elemen berbanding dengan viewport.

Berikut ialah contoh:

.fixed-element {
  position: fixed;
  top: 20px; /* 元素相对于视口顶部的偏移值 */
  left: 20px; /* 元素相对于视口左侧的偏移值 */
}

Dalam contoh di atas, elemen kelas .elemen tetap akan ditetapkan kepada kedudukan tetap dan diimbangi sebanyak 20 piksel berbanding bahagian atas dan kiri port pandangan.

Ringkasnya, kedudukan tetap ialah kaedah penentududukan CSS yang sangat praktikal Ia boleh membetulkan elemen pada kedudukan tertentu pada halaman dan tidak terjejas oleh penatalan halaman. Elemen kedudukan tetap diposisikan secara relatif kepada port pandangan, tidak menduduki aliran dokumen, bermastautin dalam port pandangan, mempunyai kedudukan tetap dan mempunyai keserasian yang baik. Dengan menggunakan kedudukan tetap secara rasional, anda boleh mencapai pelbagai kesan menarik dan meningkatkan pengalaman pengguna dan interaktiviti halaman.

Atas ialah kandungan terperinci Apakah ciri-ciri kedudukan tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!