Posisi CSS lebih dari sekadar X, Y Koordinat
Kedudukan CSS telah lama menjadi bahagian penting dalam membuat susun atur tapak web. Walaupun dengan peningkatan teknik susunatur CSS yang lebih baru seperti Flexbox dan CSS Grid, kedudukan masih mempunyai tempat penting di mana-mana beg pereka laman web.
Apabila menggunakan kedudukan CSS, perkara pertama yang perlu anda lakukan ialah menetapkan sifat CSS untuk kedudukan untuk memberitahu pelayar jika anda akan menggunakan kedudukan mutlak atau relatif untuk elemen tertentu. Anda juga perlu memahami dengan jelas perbezaan antara kedua-dua sifat kedudukan ini.
Walaupun mutlak dan relatif adalah dua sifat kedudukan CSS yang paling sering digunakan dalam reka bentuk web, sebenarnya terdapat empat keadaan untuk kedudukan harta:
- statik
- mutlak
- saudara
- tetap
Statik adalah kedudukan lalai bagi mana-mana elemen pada halaman web. Jika anda tidak menentukan kedudukan elemen, ia akan statik. Ini bermakna ia akan dipaparkan pada skrin berdasarkan di mana ia berada dalam dokumen HTML dan bagaimana ia akan dipaparkan di dalam aliran normal dokumen itu.
Jika anda menggunakan peraturan kedudukan seperti bahagian atas atau kiri ke elemen yang mempunyai kedudukan statik, peraturan tersebut akan diabaikan dan elemen akan kekal di mana ia muncul dalam aliran dokumen biasa. Sebenarnya, anda jarang sekali, jika pernah, perlu menetapkan elemen ke kedudukan statik dalam CSS kerana itu adalah nilai lalai.
Kedudukan CSS Mutlak
Kedudukan mutlak mungkin adalah kedudukan CSS paling mudah untuk difahami. Anda bermula dengan sifat kedudukan CSS ini:
kedudukan: mutlak;Nilai ini memberitahu pelayar bahawa apa sahaja yang akan diposisikan harus dialih keluar dari aliran normal dokumen dan sebaliknya diletakkan di lokasi yang tepat pada halaman. Ini dikira berdasarkan nenek moyang yang paling tidak tertutup yang paling dekat dengan elemen ini.
Oleh kerana unsur yang benar-benar diposisikan diambil dari aliran biasa dokumen, ia tidak akan menjejaskan bagaimana unsur-unsur sebelum atau selepasnya dalam HTML diposisikan pada halaman web.
Contohnya - jika anda mempunyai bahagian yang diposisikan dengan menggunakan nilai relatif (kita akan melihat nilai ini tidak lama lagi), dan di dalam bahagian tersebut, anda mempunyai perenggan yang anda ingin meletakkan 50 piksel dari bahagian atas, anda akan menambah nilai kedudukan "absolut" kepada perenggan itu bersama-sama dengan nilai offset 50px pada harta "atas", seperti ini.
kedudukan: mutlak; atas: 50px;Unsur yang benar-benar diposisikan itu kemudiannya akan memaparkan 50 piksel dari bahagian atas bahagian yang relatif diposisikan - tidak kira apa lagi yang dipaparkan di dalam aliran normal. Unsur kedudukan "mutlak" anda menggunakan kedudukan yang relatif sebagai konteksnya dan nilai pos yang anda gunakan adalah relatif bahawa itu.
Empat sifat kedudukan yang anda ada untuk digunakan ialah:
- atas
- betul
- bawah
- dibiarkan
Anda boleh menggunakan sama ada atas atau bawah (kerana unsur tidak boleh diletakkan mengikut kedua-dua nilai ini) dan sama ada kanan atau kiri.
Sekiranya unsur ditetapkan ke kedudukan yang mutlak, tetapi di sana ia tidak mempunyai nenek moyang yang tidak berpusat, maka ia akan diposisikan relatif terhadap unsur tubuh, yang merupakan unsur tahap tertinggi pada halaman.
Posisi Relatif
Kami sudah menyebut kedudukan relatif, jadi mari kita lihat harta itu sekarang.
Kedudukan relatif menggunakan empat kedudukan kedudukan yang sama sebagai kedudukan mutlak, tetapi bukannya mendasarkan kedudukan elemen itu kepada nenek moyang yang paling tidak diletakkan di kedudukannya yang tidak bersistensi, ia bermula dari mana elemen itu akan berada jika aliran masih normal.
Sebagai contoh, jika anda mempunyai tiga perenggan di halaman web anda, dan yang ketiga mempunyai gaya "kedudukan: relatif" yang diletakkan di atasnya, kedudukannya akan diimbangi berdasarkan lokasi semasa.
Perenggan 1.
Perenggan 2.
Dalam contoh di atas, perenggan ketiga akan diletakkan 2em dari sebelah kiri elemen kontena, tetapi masih di bawah dua perenggan pertama. Ia akan kekal dalam aliran biasa dokumen, dan hanya akan diimbangi sedikit. Sekiranya anda menukarnya ke kedudukan: mutlak; apa-apa perkara berikut akan dipaparkan di atasnya, kerana ia tidak lagi berada dalam aliran biasa dokumen itu.
Unsur-unsur pada halaman web sering digunakan untuk menetapkan nilai kedudukan: relatif tanpa nilai offset yang ditetapkan, yang bermaksud bahawa elemen tetap tepat di mana ia akan muncul dalam aliran normal. Ini dilakukan semata-mata untuk menubuhkan elemen itu sebagai konteks yang mana elemen-elemen lain boleh diletakkan sama sekali. Sebagai contoh, jika anda mempunyai bahagian di sekeliling seluruh laman web anda dengan nilai kelas "kontena" (yang merupakan senario yang sangat umum dalam reka bentuk web), pembahagian itu boleh ditetapkan ke kedudukan relatif supaya apa-apa di dalamnya boleh digunakan ia sebagai konteks kedudukan.
Bagaimana dengan Kedudukan Tetap?
Kedudukan tetap adalah seperti kedudukan mutlak. Kedudukan elemen dikira dengan cara yang sama seperti model mutlak, tetapi elemen tetap kemudian ditetapkan di lokasi tersebut - hampir seperti watermark . Segala-galanya pada halaman kemudian akan menatal melewati elemen tersebut.
Untuk menggunakan nilai hartanah ini, anda akan menetapkan:
kedudukan: tetap;Perlu diingat, apabila anda menetapkan elemen di tempat di tapak anda, ia akan mencetak di lokasi tersebut apabila halaman Web anda dicetak. Sebagai contoh, jika elemen anda ditetapkan di bahagian atas halaman anda, ia akan muncul di bahagian atas setiap halaman bercetak - kerana ia tetap di bahagian atas halaman. Anda boleh menggunakan jenis media untuk mengubah cara halaman bercetak memaparkan elemen tetap:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 1/7/16.