Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah sifat yang ada pada kedudukan?

Apakah sifat yang ada pada kedudukan?

百草
Lepaskan: 2023-10-10 11:18:08
asal
1492 orang telah melayarinya

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;

Apakah sifat yang ada pada kedudukan?

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;
   }
Salin selepas log masuk

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;
   }
Salin selepas log masuk

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;
   }
Salin selepas log masuk

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;
   }
Salin selepas log masuk

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;
   }
Salin selepas log masuk

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!

Label berkaitan:
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan