Apakah perbezaan antara kedudukan: statik, kedudukan: relatif, kedudukan: mutlak, dan kedudukan: tetap?-tutorial css-php.cn

Apakah perbezaan antara kedudukan: statik, kedudukan: relatif, kedudukan: mutlak, dan kedudukan: tetap?

Harta position dalam CSS digunakan untuk menentukan kaedah kedudukan elemen. Terdapat empat nilai utama untuk harta ini: static , relative , absolute , dan fixed . Berikut adalah penjelasan terperinci mengenai masing -masing:

Kedudukan: Statik : Ini adalah nilai lalai untuk semua elemen. Apabila elemen mempunyai position: static , ia diposisikan mengikut aliran normal dokumen. top , right , bottom , dan left tidak menjejaskan unsur -unsur yang diposisikan secara statik.
Kedudukan: Relatif : Satu elemen dengan position: relative diposisikan relatif terhadap kedudukan normalnya. Anda boleh menggunakan sifat top , right , bottom , dan left untuk memindahkan elemen dari kedudukan normalnya. Unsur -unsur lain di halaman diposisikan seolah -olah elemen yang agak diposisikan masih dalam kedudukan asalnya.
Kedudukan: Mutlak : Unsur dengan position: absolute dikeluarkan dari aliran dokumen biasa, dan tiada ruang dibuat untuk elemen dalam susun atur halaman. Ia diposisikan berbanding dengan nenek moyangnya yang terdekat (bukannya diposisikan berbanding dengan pandangan, seperti tetap). Jika tiada nenek moyang mempunyai kedudukan selain static , ia menggunakan blok yang mengandungi awal (biasanya elemen ).
Kedudukan: Tetap : Unsur dengan position: fixed diposisikan relatif kepada viewport, yang bermaksud ia sentiasa tinggal di tempat yang sama walaupun halaman tersebut ditatal. top , right , bottom , dan left digunakan untuk menentukan kedudukan.

Setiap kaedah kedudukan ini memberi kesan bagaimana elemen berkelakuan dalam aliran dokumen dan bagaimana ia berinteraksi dengan unsur -unsur lain dan viewport.

Bagaimanakah susunan elemen stacking berubah dengan sifat kedudukan CSS yang berbeza?

Perintah penyusunan (atau z-order) elemen ditentukan oleh sifat CSS z-index dalam kombinasi dengan harta position . Begini cara kaedah kedudukan yang berbeza mempengaruhi susunan susunan:

Kedudukan statik : Unsur dengan position: static tidak mengambil bahagian dalam pesanan Z seperti yang ditakrifkan oleh z-index . Mereka diberikan mengikut urutan yang mereka tampilkan dalam sumber dokumen, dari bawah ke atas.
Kedudukan relatif, mutlak, dan tetap : Unsur dengan position: relative , position: absolute , atau position: fixed boleh mempunyai pesanan Z mereka dikawal oleh harta z-index . Unsur-unsur dengan nilai z-index yang lebih tinggi akan muncul di atas elemen dengan nilai z-index yang lebih rendah.
Konteks Stacking : Apabila elemen dengan sebarang kedudukan selain static (dan z-index selain daripada auto ) menetapkan konteks penyusunan baru, semua elemen anaknya diberikan dalam konteks ini. Ini bermakna bahawa nilai-nilai z-index unsur-unsur dalam konteks penyusunan yang berbeza hanya dibandingkan dalam konteks mereka sendiri.
Pesanan penyusunan lalai : Dalam konteks penyusunan, unsur -unsur disusun dalam perintah ini (dari bawah ke atas):
1. Latar belakang dan sempadan elemen yang membentuk konteks penyusunan.
2. Unsur-unsur yang diposisikan dengan nilai z-index negatif (nombor yang lebih rendah disusun terlebih dahulu).
3. Unsur-unsur yang tidak diposisikan (elemen dengan position: static ).
4. Unsur-unsur yang diposisikan dengan z-index: auto atau z-index: 0 .
5. Unsur-unsur yang diposisikan dengan nilai z-index positif (bilangan yang lebih tinggi disusun terakhir).

Memahami peraturan ini adalah penting untuk mengawal lapisan visual unsur -unsur di laman web.

Bolehkah anda menerangkan cara menggunakan kedudukan: relatif dan kedudukan: mutlak bersama untuk membuat susun atur?

Menggunakan position: relative dan position: absolute Bersama -sama adalah teknik biasa dalam CSS untuk mewujudkan susun atur yang kompleks. Inilah cara ia berfungsi:

Bekas induk dengan position: relative : bekas induk perlu mempunyai position: relative . Tetapan ini memastikan bahawa mana -mana elemen kanak -kanak dengan position: absolute akan diposisikan berbanding dengan bekas ini dan bukannya keseluruhan dokumen.
```
 <code class="css">.parent-container { position: relative; }</code>
```
Salin selepas log masuk
Unsur kanak -kanak dengan position: absolute : elemen kanak -kanak, yang anda mahu kedudukan tepat dalam bekas induk, harus mempunyai position: absolute . Anda kemudian boleh menggunakan sifat top , right , bottom , dan left untuk menentukan kedudukannya berbanding ibu bapa.
```
 <code class="css">.child-element { position: absolute; top: 10px; left: 20px; }</code>
```
Salin selepas log masuk
Ini akan memposisikan 10 piksel .child-element dari bahagian atas dan 20 piksel dari sebelah kiri. .parent-container .

Inilah contoh bagaimana ini dapat dilihat di HTML dan CSS:

 <code class="html"><div class="parent-container"> <div class="child-element">This is the child element</div> </div></code>

Salin selepas log masuk

 <code class="css">.parent-container { position: relative; width: 300px; height: 200px; border: 1px solid black; } .child-element { position: absolute; top: 10px; left: 20px; background-color: red; }</code>

Salin selepas log masuk

Dalam contoh ini, .child-element akan diposisikan 10 piksel dari atas dan 20 piksel dari sebelah kiri. .parent-container , yang mempunyai saiz 300x200 piksel dengan sempadan hitam.

Harta kedudukan CSS mana yang harus saya gunakan untuk menyimpan elemen di lokasi tetap pada skrin?

Untuk menyimpan elemen di lokasi tetap pada skrin, tanpa mengira menatal, anda harus menggunakan position: fixed . Inilah cara ia berfungsi:

Penggunaan : Apabila anda menetapkan position: fixed pada elemen, ia dikeluarkan dari aliran dokumen biasa, dan tiada ruang dibuat untuknya dalam susun atur halaman. Unsur ini diposisikan relatif kepada viewport, yang bermaksud ia tidak bergerak apabila halaman ditatal.
Ciri -ciri : Anda boleh menggunakan sifat top , right , bottom , dan left untuk menentukan kedudukan tepat elemen tetap dalam paparan.

Berikut adalah contoh:

 <code class="css">.fixed-element { position: fixed; top: 20px; right: 30px; background-color: blue; }</code>

Salin selepas log masuk

Dalam contoh ini, .fixed-element

Menggunakan position: fixed sesuai untuk unsur -unsur seperti bar navigasi, tajuk, atau kaki yang anda mahu tetap kelihatan dan di tempat yang sama di skrin pada setiap masa.

Atas ialah kandungan terperinci Apakah perbezaan antara kedudukan: statik, kedudukan: relatif, kedudukan: mutlak, dan kedudukan: tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!