Bagaimana untuk menggunakan kedudukan dalam css

Atribut kedudukan dalam CSS digunakan untuk menentukan kedudukan elemen dalam aliran dokumen Nilai yang mungkin adalah: statik (lalai): elemen disusun dalam susunan biasa dalam aliran dokumen. relatif: Mengalihkan elemen pada jarak tertentu berbanding kedudukan asalnya, tetapi masih kekal dalam aliran dokumen. mutlak: Mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada induk atau elemen akarnya. tetap: Memperbaiki elemen dalam port pandangan penyemak imbas supaya ia tidak akan bergerak walaupun halaman itu ditatal.

Penggunaan kedudukan dalam CSS

Harta kedudukan mentakrifkan kedudukan elemen dalam aliran dokumen HTML dan elemen sekeliling. Ia boleh menentukan sama ada elemen itu statik, relatif, mutlak atau tetap.

1. statik (lalai)

Kedudukan statik ialah kedudukan lalai, dan elemen menduduki ruang biasa dalam aliran dokumen.

2. relatif

Kedudukan relatif menggerakkan elemen pada jarak tertentu dari kedudukan normalnya tanpa mengeluarkannya daripada aliran dokumen.

3. mutlak

Kedudukan mutlak mengalih keluar elemen daripada aliran dokumen dan meletakkannya berdasarkan unsur induk atau akarnya.

4. tetap

Kedudukan tetap membetulkan elemen dalam port pandangan penyemak imbas dan tidak akan bergerak walaupun halaman itu ditatal.

Penggunaan

Sintaks atribut kedudukan adalah seperti berikut:

position: value;

Di mana, nilai boleh menjadi salah satu nilai berikut:

• statik
• relative
• relative
• abute

Contoh

Contoh di bawah Letakkan elemen div secara relatifnya 10px ke kanan:

div {
  position: relative;
  right: 10px;
}

Contoh berikut meletakkan elemen div secara mutlak di penjuru kanan sebelah bawah halaman:

div {
  position: absolute;
  bottom: 0;
  right: 0;
}

Nota:

• boleh dengan elemen kedudukanOnly
tetapkan Atribut kiri, kanan, atas dan bawah.
• Elemen yang diposisikan secara relatif menduduki ruang dalam aliran dokumen, manakala elemen yang diposisikan secara mutlak tidak.
• Elemen kedudukan tetap tidak akan bergerak semasa halaman ditatal, tetapi akan menjejaskan kedudukan elemen lain.

🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kedudukan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!