Apakah sifat yang ada pada kedudukan?

Nilai atribut kedudukan termasuk statik, relatif, mutlak, tetap, melekit, dsb. Pengenalan terperinci: 1. statik ialah nilai lalai bagi atribut kedudukan, yang bermaksud bahawa unsur-unsur dibentangkan mengikut aliran dokumen biasa tanpa kedudukan khas Kedudukan unsur-unsur ditentukan oleh susunannya dalam dokumen HTML dan tidak boleh melalui atas, kanan, dan bawah Laraskan dengan atribut kiri;

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

Dalam pembangunan bahagian hadapan, kedudukan ialah atribut penting dalam CSS, yang digunakan untuk mengawal kedudukan elemen. Atribut kedudukan mempunyai nilai yang biasa digunakan berikut:

1. statik (nilai lalai):

Statik ialah nilai lalai bagi atribut kedudukan, yang bermaksud bahawa elemen dibentangkan mengikut aliran dokumen biasa tanpa kedudukan khas. Kedudukan elemen ditentukan oleh susunannya dalam dokumen HTML dan tidak boleh dilaraskan melalui atribut atas, kanan, bawah dan kiri.

   .element {
     position: static;
   }

2. relatif：

Kedudukan relatif relatif bermaksud bahawa elemen diletakkan secara relatif kepada kedudukan normalnya. Dengan menetapkan sifat atas, kanan, bawah dan kiri, anda boleh memperhalusi kedudukan elemen dalam aliran dokumen. Kedudukan relatif tidak menjejaskan susun atur elemen lain.

   .element {
     position: relative;
     top: 10px;
     left: 20px;
   }

3 mutlak:

Kedudukan mutlak mutlak bermaksud elemen diposisikan secara relatif kepada elemen induk kedudukan terdekatnya (nilai atribut kedudukan tidak statik). Jika tiada elemen induk diposisikan, kedudukan adalah relatif kepada blok mengandungi awal dokumen. Dengan menetapkan atribut atas, kanan, bawah dan kiri, anda boleh mengawal kedudukan elemen dengan tepat.

   .element {
     position: absolute;
     top: 50px;
     left: 100px;
   }

4 tetap:

Kedudukan tetap bermakna elemen diposisikan secara relatif kepada tetingkap penyemak imbas dan sentiasa kekal pada kedudukan tetap dalam tetingkap dan tidak akan menukar kedudukan dengan menatal. Dengan menetapkan sifat atas, kanan, bawah dan kiri, anda boleh menentukan kedudukan elemen dalam tetingkap.

   .element {
     position: fixed;
     top: 0;
     right: 0;
   }

5. sticky:

Sticky sticky positioning bermaksud elemen diletakkan mengikut perubahan kedudukan skrol. Apabila elemen kelihatan dalam bekas, kedudukannya adalah relatif kepada bekas, dan apabila elemen itu menatal keluar dari bekas, ia berlabuh pada sempadan bekas. Anda boleh mengawal kedudukan melekit elemen dengan menetapkan atribut atas, kanan, bawah dan kiri.

   .element {
     position: sticky;
     top: 20px;
   }

Selain nilai atribut kedudukan yang biasa digunakan di atas, terdapat juga beberapa nilai yang kurang biasa digunakan, seperti:

- mewarisi: mewarisi nilai atribut kedudukan elemen induk.

- awal: Menetapkan semula sifat kedudukan kepada statik nilai lalai.

- tidak ditetapkan: Menetapkan semula atribut kedudukan kepada nilai lalai dan mewarisi nilai atribut kedudukan elemen induk.

Perlu diambil perhatian bahawa nilai atribut kedudukan akan mempengaruhi susunan susunan (indeks-z) unsur-unsur Kaedah kedudukan yang berbeza mempunyai peraturan susunan susunan yang berbeza.

Ringkasnya, atribut kedudukan digunakan untuk mengawal kaedah penentududukan elemen nilai yang biasa digunakan adalah statik, relatif, mutlak, tetap dan melekit. Kedudukan elemen boleh dilaraskan dengan menetapkan atribut atas, kanan, bawah dan kiri. Memahami dan menggunakan atribut kedudukan secara fleksibel boleh membantu kami mencapai kesan reka letak yang lebih tepat.

Atas ialah kandungan terperinci Apakah sifat yang ada pada kedudukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!