Atribut kedudukan adalah atribut utama dalam CSS yang mengawal kedudukan elemen. Nilai umum termasuk statik, relatif, mutlak, tetap, dan melekit. Statik adalah nilai lalai, dan unsur -unsur disusun mengikut aliran dokumen dan tidak terjejas oleh atribut kedudukan; Relatif menyebabkan elemen beralih relatif kepada kedudukannya sendiri tetapi kekal dalam aliran dokumen; Mutlak membolehkan elemen itu diposisikan berdasarkan unsur-unsur nenek moyang yang tidak statik yang paling baru dan terpisah dari aliran dokumen; Tetap diposisikan dengan viewport sebagai rujukan dan mengekalkan kedudukan tetap apabila menatal; Sticky ditetapkan selepas menatal ke kedudukan tertentu, antara relatif dan tetap, dan nilai arah perlu ditentukan dan elemen induk tidak boleh melimpah: tersembunyi. Menguasai ciri -ciri setiap nilai boleh membantu susun atur dengan tepat.

Atribut position CSS adalah bahagian yang sangat kritikal dari susun atur, tetapi ia sering mengelirukan untuk pemula. Ia menentukan bagaimana unsur -unsur diposisikan di halaman, dan nilai yang berbeza akan menjadikan unsur -unsur berkelakuan sepenuhnya. Memahami perbezaan di antara mereka dapat membantu anda mengawal struktur laman web anda dengan lebih baik.

Apakah atribut kedudukannya?

position adalah atribut yang digunakan dalam CSS untuk mengawal kaedah kedudukan elemen. Nilai umum termasuk: static , relative , absolute , fixed dan sticky . Setiap nilai berubah bagaimana elemen dinyatakan dalam aliran dokumen, terutamanya apabila digunakan dengan top , bottom , left , dan right .

statik vs relatif: Kedudukan dua yang paling asas

Ini adalah dua yang paling mengelirukan tetapi juga negeri yang paling biasa digunakan.

• static
  Ini adalah nilai lalai. Unsur -unsur disusun mengikut aliran dokumen biasa dan tidak akan terjejas oleh atribut kedudukan seperti top dan bottom . Jika anda tidak menetapkan position , ia adalah negeri.

  

• relative
  Unsur ini kekal dalam aliran dokumen, tetapi ia boleh diimbangi dari kedudukan asalnya menggunakan top , bottom , left , dan right . Contohnya:

   .box {
    Kedudukan: Relatif;
    Atas: 10px;
    Kiri: 20px;
  }

  Dengan cara ini kotak akan bergerak 10px ke bawah dan 20px betul, tetapi selebihnya tidak akan mengisi kedudukan asalnya.

Nota: Kedudukan relatif sering digunakan sebagai "titik rujukan" untuk elemen kedudukan mutlak.

mutlak dan tetap: Cara mencari tanpa aliran dokumen

Kedua -dua nilai ini akan menjadikan elemen ini berasingan dari aliran dokumen dan melakukan lebih fleksibel.

• absolute
  Unsur-unsur diposisikan berdasarkan elemen nenek moyang yang paling terkini yang telah menetapkan kedudukan bukan static . Sekiranya tidak ada nenek moyang seperti itu, anda akan terus melihat sehingga viewport atau nenek moyang tertentu.

  Sebagai contoh, jika anda ingin membuat tetingkap pop timbul, anda biasanya menetapkan bekas induk kepada relative dan kemudian tetapkan tetingkap pop timbul untuk absolute , supaya anda dapat mengawal kedudukan dengan tepat.

• fixed
  Sama seperti absolute , tetapi ia selalu mengambil pandangan penyemak imbas sebagai titik rujukan. Walaupun halaman itu ditatal, ia akan ditetapkan dalam kedudukan itu. Biasa di bar navigasi atau kembali ke butang atas.

Petua: Apabila menggunakan absolute atau fixed , ingatlah untuk memeriksa sama ada ibu bapa telah menetapkan kedudukan yang sesuai, jika tidak, ia mungkin terletak di tempat yang tidak dijangka.

melekit: kedudukan melekit, antara relatif dan tetap

sticky adalah kaedah kedudukan yang sangat praktikal tetapi istimewa. Ia kelihatan seperti relative , tetapi selepas menatal ke ambang tertentu, ia tetap dalam kedudukan tertentu seperti fixed .

Sebagai contoh, anda mahu tajuk meja tetap kelihatan semasa menatal:

 th {
  Kedudukan: melekit;
  Atas: 0;
  Latar Belakang: Putih;
}

Pada masa ini, apabila pengguna menatal halaman, tajuk akan "melekat" pada skrin apabila menatal ke atas.

Nota:

• top , bottom , left atau right mesti ditentukan untuk berkuatkuasa.
• Unsur induk tidak dapat menetapkan overflow: hidden , jika tidak melekit tidak akan berfungsi.
• Ia menyokong dengan baik dalam pelayar moden, tetapi tidak serasi dalam versi lama IE.

Pada dasarnya itu sahaja. Perbezaan antara nilai position yang berbeza sebenarnya tidak rumit, tetapi mudah untuk mengabaikan beberapa butiran dalam penggunaan sebenar, seperti perubahan aliran dokumen, kesan kedudukan induk, dan lain -lain. Menguasai ini akan menjadikan anda lebih selesa apabila membuat susun atur.

Atas ialah kandungan terperinci Menjelaskan perbezaan harta posisi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!