Kedudukan CSS telah lama menjadi bahagian penting dalam membuat susun atur tapak web. Walaupun dengan peningkatan teknik susunatur CSS seperti Flexbox dan CSS Grid, kedudukan masih mempunyai tempat yang penting di mana-mana beg pereka web trik.
Apabila menggunakan kedudukan CSS, perkara pertama yang perlu anda lakukan ialah menetapkan sifat CSS untuk kedudukan untuk memberitahu penyemak imbas sama ada anda akan menggunakan kedudukan mutlak atau relatif untuk elemen tertentu. Anda juga perlu memahami 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
Posisi Statik
Statik adalah kedudukan lalai bagi mana-mana unsur pada halaman web. Jika anda tidak menentukan posisi elemen, ia adalah statik, yang bermaksud ia memaparkan pada skrin berdasarkan di mana ia berada dalam dokumen HTML dan bagaimana ia memaparkan di dalam aliran normal dokumen itu.
Jika anda memohon peraturan kedudukan seperti atas atau ditinggalkan kepada elemen yang mempunyai kedudukan statik, peraturan tersebut diabaikan, dan elemen kekal di mana ia muncul dalam aliran dokumen biasa. Anda jarang, jika pernah, perlu menetapkan elemen ke kedudukan statik dalam CSS kerana ia 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 kedudukan yang paling dekat dengan elemen ini. Oleh kerana elemen yang benar-benar diposisikan diambil dari aliran biasa dokumen, ia mempengaruhi bagaimana elemen-elemen sebelum atau selepasnya dalam HTML diposisikan pada laman web. Sebagai contoh, jika anda mempunyai bahagian yang diposisikan dengan menggunakan nilai relatif dan di dalam bahagian itu, anda mempunyai perenggan yang anda mahu meletakkan 50 piksel dari bahagian atas bahagian, anda menambah nilai kedudukan mutlak kepada perenggan itu bersama-sama dengan nilai mengimbangi 50px pada atas harta, seperti ini: kedudukan: mutlak;atas: 50px;
Unsur yang benar-benar diposisikan ini sentiasa memaparkan 50 piksel dari bahagian atas bahagian yang relatif diposisikan, tidak kira apa lagi yang dipaparkan di dalam aliran normal. Unsur yang benar-benar diposisikan anda menggunakan kedudukan yang relatif sebagai konteksnya, dan nilai kedudukan yang anda gunakan adalah relatif terhadapnya. Empat sifat kedudukan yang anda ada untuk digunakan ialah: Anda boleh menggunakan sama ada atas atau bawah - kerana elemen tidak boleh diletakkan mengikut kedua-dua nilai ini - dan sama ada betul atau ditinggalkan. Sekiranya unsur ditetapkan ke kedudukan yang mutlak, tetapi ia tidak mempunyai nenek moyang yang tidak berpandangan secara statik, maka kedudukannya adalah relatif terhadap unsur tubuh, yang merupakan unsur tahap tertinggi pada halaman. Kedudukan relatif menggunakan empat kedudukan kedudukan yang sama sebagai kedudukan mutlak, tetapi bukannya mendasarkan kedudukan elemen berdasarkan nenek moyang yang kedudukannya yang tidak tertutup secara statik, ia bermula dari mana unsur itu akan berada jika ia masih dalam aliran normal. Sebagai contoh, jika anda mempunyai tiga perenggan di halaman web anda, dan yang ketiga mempunyai kedudukan: saudara gaya diletakkan di atasnya, kedudukannya diimbangi berdasarkan lokasi semasa. Perenggan 1. Perenggan 2. Perenggan 3. Dalam contoh di atas, perenggan ketiga diletakkan 2em dari sebelah kiri elemen kontena tetapi masih di bawah dua perenggan pertama. Ia kekal dalam aliran normal dokumen dan diimbangi sedikit. Sekiranya anda menukarnya kepada kedudukan: mutlak, apa-apa yang mengikuti ia memaparkan di atasnya kerana ia tidak lagi dalam aliran biasa dokumen itu. Elemen pada halaman web sering digunakan untuk menetapkan nilai kedudukan: saudara dengan tiada nilai offset yang ditubuhkan, yang bermaksud bahawa unsur tetap kekal 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 keseluruhan laman web anda dengan nilai kelas bekas, yang merupakan senario biasa dalam reka bentuk web, bahagian itu boleh ditetapkan ke kedudukan saudara supaya apa-apa di dalamnya boleh menggunakannya sebagai konteks kedudukan. 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 itu kemudiannya menatal melewati elemen itu. Untuk menggunakan nilai hartanah ini, anda menetapkan: kedudukan: tetap;
Perlu diingat, apabila anda menetapkan elemen di tempat di tapak anda, ia 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 skrin { h1 # pertama {kedudukan: tetap; } } @media print { h1 # pertama {kedudukan: statik; } }
Posisi Relatif
Bagaimana dengan Kedudukan Tetap?
