Kedudukan CSS: Ke Mana Tepat Adakah Anda Fikir Anda Akan Pergi?

✨
Artikel ini adalah sebahagian daripada siri yang lebih besar yang tersedia di tapak web saya sendiri. Klik di sini untuk mengetahui lebih lanjut tentang CSS 101: The Series. Ianya percuma sepenuhnya!

Selamat datang ke alam ajaib kedudukan CSS, di mana anda boleh bermain sebagai arkitek dan pereka bentuk untuk elemen web anda! Jika anda pernah tertanya-tanya cara meletakkan butang itu tepat di tempat yang anda inginkan, atau cara memastikan pengepala anda tidak tersasar, anda berada di tempat yang betul. Mari kita selami asas penentududukan CSS dengan sentuhan kecerdasan dan taburan keseronokan.

1. Kedudukan Statik: Tetapan Lalai

Kedudukan statik adalah seperti tetapan lalai pada TV anda. Tiada apa-apa yang mewah, hanya asas dan mudah. Secara lalai, semua elemen diletakkan secara statik; yang bermaksud ia mengalir dalam dokumen seperti yang anda jangkakan - satu demi satu.

div {
    position: static;
}

Apabila anda menggunakan position: static;, pada asasnya anda memberitahu penyemak imbas untuk meletakkan elemen di tempat biasa, sama seperti ia secara semula jadi. Ia adalah "tiada apa yang dapat dilihat di sini" dalam kedudukan.

2. Kedudukan Relatif: Rakan Yang Sedikit Berubah

Kedudukan relatif adalah seperti mempunyai rakan yang selalu sedikit tidak bertempat tetapi dengan cara yang menawan. Ia membolehkan anda mengalihkan elemen berbanding tempat ia biasanya, tanpa mengganggu seluruh halaman.

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

Di sini, .relative-box akan dianjakkan 10 piksel ke bawah dan 20 piksel ke kanan daripada kedudukan asalnya. Selebihnya elemen di sekelilingnya akan tetap berada di tempat asalnya.

3. Kedudukan Mutlak: Pencari Kebebasan

Kedudukan mutlak adalah seperti rakan petualang anda yang tidak mengikuti orang ramai. Ia membolehkan anda meletakkan elemen di mana-mana yang anda mahu, berbanding dengan nenek moyang "bukan statik" terdekat (iaitu, moyang dengan kedudukan: relatif, mutlak, tetap atau melekit).

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 30px;
    right: 10px;
}

Dalam contoh ini, .child akan diletakkan 30 piksel dari atas dan 10 piksel dari kanan .parent. Jika .parent tiada di sana, ia akan diposisikan secara relatif kepada nenek moyang kedudukan terdekat atau tempat pandang.

Petua Pro?
Apabila elemen diletakkan secara mutlak di dalam induk dengan pengubahsuaian digunakan, ia diposisikan secara relatif kepada induk yang diubah, bukan aliran dokumen asal. Berhati-hati dengan tingkah laku ini untuk mengelakkan peralihan reka letak dan isu kedudukan yang tidak dijangka.

4. Kedudukan Tetap: Statik yang Degil

Kedudukan tetap adalah seperti mempunyai kerusi kegemaran yang anda tidak pernah bergerak. Ia membolehkan anda meletakkan elemen berbanding dengan port pandangan, jadi ia kekal di tempat yang sama tidak kira berapa banyak anda menatal.

.floating-action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Dengan kedudukan: tetap;, butang .floating-action akan kekal 20 piksel dari bawah dan 20 piksel dari sebelah kanan port pandangan, walaupun anda menatal ke bawah. Ia sesuai untuk elemen melekit seperti pengepala tapak anda atau widget sembang atau butang seruan tindak yang berterusan.

5. Kedudukan Melekit: Yang Terbaik dari Kedua-dua Dunia

Kedudukan melekit adalah seperti mempunyai rakan yang sentiasa berada di dalam dan di luar perhatian. Anda boleh menganggapnya sebagai hibrid antara kedudukan relatif dan tetap. Elemen dengan kedudukan: sticky akan melekat pada kedudukannya dalam bekasnya apabila anda menatal melepasi titik tertentu, tetapi sebaliknya berkelakuan seperti elemen yang agak kedudukannya.

.sticky-box {
    position: sticky;
    top: 0;
}

Dalam contoh ini, .sticky-box akan melekat pada bahagian atas bekasnya sebaik sahaja anda menatal melepasinya dan kekal di sana semasa anda meneruskan menatal, tetapi hanya selagi bekas itu dilihat. Apabila bekas itu menatal keluar dari pandangan, elemen melekit akan menatal bersamanya. Ia bagus untuk pengepala, menu navigasi atau bar sisi yang anda mahu kekal kelihatan dalam bahagian tertentu halaman anda.

Z-Index: Yang Berjaya

Ah, indeks-z! Di sinilah keadaan menjadi agak kompetitif. Apabila elemen bertindih, indeks-z menentukan yang mana satu berada di atas. Ia seperti pertandingan populariti sekolah menengah, tetapi untuk elemen web anda.

.box1 {
    position: absolute;
    z-index: 10;
}

.box2 {
    position: absolute;
    z-index: 5;
}

Dalam kes ini, .box1 akan muncul di atas .box2 kerana ia mempunyai indeks-z yang lebih tinggi. Ingatlah, indeks-z hanya berfungsi pada elemen kedudukan (relatif, mutlak, tetap atau melekit).

Petua Pro?
Terdapat lebih banyak untuk indeks-z daripada apa yang dijelaskan di atas. Nantikan untuk menyelam lebih mendalam ke dalam "konteks tindanan", yang akan memberi anda pemahaman yang lebih lengkap tentang cara indeks-z berfungsi dalam reka letak yang kompleks.

Membungkusnya

Penempatan CSS mungkin kelihatan seperti teka-teki, tetapi setelah anda membiasakannya, anda akan meletakkan elemen dengan ketepatan dan bakat. Setiap jenis jawatan mempunyai peranan tersendiri dalam reka bentuk web. Cuba mereka dan lihat cara anda boleh menjadikan halaman web anda kelihatan betul-betul betul.

Selamat mengekod!

✨
Psst! Jika anda menyukai apa yang anda baca, anda harus klik di sini untuk menyemak CSS 101: The Series. Ianya percuma sepenuhnya!

Atas ialah kandungan terperinci Kedudukan CSS: Ke Mana Tepat Adakah Anda Fikir Anda Akan Pergi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!