Kedudukan: relative absolute fixed sticky
Keluarkan elemen daripada aliran biasa dengan nilai position untuk menindih kandungan, menetapkan pengepala dan mencipta bar sisi lekat.
Kedudukan: relative absolute fixed sticky ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Aliran Dokumen Biasa
Secara lalai, elemen mengikut aliran dokumen biasa: elemen blok bertindan secara menegak, manakala elemen sebaris mengalir secara mendatar dalam teks. Sifat position membolehkan anda keluar daripada aliran ini untuk tindanan, pengepala tetap dan petua alat.
position: static (Lalai)
Setiap elemen bermula dengan position: static. Ini bermakna kedudukannya ditentukan oleh aliran dokumen biasa. Sifat top, right, bottom dan left tidak memberi kesan pada elemen statik.
position: relative
position: relative mengekalkan elemen dalam aliran biasa tetapi membolehkan anda mengimbangkannya daripada kedudukan asal menggunakan top, right, bottom dan left. Yang penting, sifat ini mewujudkan konteks kedudukan untuk keturunan yang diletakkan secara mutlak.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute mengeluarkan elemen daripada aliran biasa. Elemen itu diletakkan secara relatif kepada leluhur berposisi yang paling hampir (apa-apa kedudukan selain static). Jika tiada leluhur berposisi, kedudukannya adalah relatif kepada ruang pandang.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}Sifat z-index
Elemen berposisi boleh bertindih. Gunakan z-index untuk mengawal susunan tindanan. Nilai z-index yang lebih tinggi berada di atas. Ini hanya berfungsi pada elemen berposisi (bukan static). Ia mewujudkan konteks tindanan baharu.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed mengeluarkan elemen daripada aliran biasa dan menetapkannya pada ruang pandang. Elemen itu tidak bergerak apabila halaman ditatal. Ia sesuai untuk pengepala melekat, butang tindakan terapung dan sepanduk kuki.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky ialah gabungan dua pendekatan: elemen itu menatal bersama halaman sehingga mencapai ambang (ditetapkan dengan top/bottom), kemudian elemen itu melekat. Ini berguna untuk pengepala bahagian dalam jadual panjang atau bar sisi yang melekat selepas pengepala.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}Pemusatan dengan position: absolute
Teknik klasik: gabungkan position: absolute; top: 50%; left: 50% dengan transform: translate(-50%, -50%) untuk memusatkan elemen dengan sempurna dalam induknya yang berposisi.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}Limpahan tersembunyi memotong elemen anak mutlak
Elemen anak yang berposisi mutlak boleh melampaui sempadan induknya secara lalai. Menambahkan overflow: hidden pada induk akan memotong apa-apa yang berada di luar kotaknya — berguna untuk kesan imej kad dan pemotongan lencana.
Perangkap: konteks tindanan yang tidak diingini
Sesetengah sifat mewujudkan konteks tindanan tanpa sengaja: transform, filter, isolation: isolate. Ini boleh menyebabkan pertikaian z-index apabila elemen z-index: 9999 masih berada di belakang elemen lain kerana elemen itu berada dalam konteks tindanan yang lebih rendah.
Bila hendak menggunakan setiap kedudukan
relative: mengimbangi dan menyediakan konteks peletakan. absolute: lencana, petua alat dan tindanan yang relatif kepada induk. fixed: pengepala kekal, modal dan pemberitahuan timbul. sticky: pengepala bahagian dan navigasi bar sisi yang mengikuti penatalan. Elakkan position untuk susun atur — gunakan Flex atau Grid.
Semakan pantas
Sebuah elemen mempunyai position: absolute; top: 0; right: 0;. Di manakah elemen itu akan muncul jika induknya mempunyai position: relative?
Imbas kembali: Peletakan CSS
static ialah lalai. relative mengimbangi elemen tanpa mengeluarkannya daripada aliran dan mewujudkan konteks peletakan. absolute mengeluarkan elemen daripada aliran dan meletakkannya pada leluhur berposisi yang paling hampir. fixed melekat pada ruang pandang. sticky menatal kemudian melekat. Gunakan z-index untuk mengawal susunan tindanan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Kedudukan: relative absolute fixed sticky” percuma?
Ya — teks penuh “Kedudukan: relative absolute fixed sticky” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Kedudukan: relative absolute fixed sticky”?
Keluarkan elemen daripada aliran biasa dengan nilai position untuk menindih kandungan, menetapkan pengepala dan mencipta bar sisi lekat. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Kedudukan: relative absolute fixed sticky” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pemilih dan Lata
- Warna, Tipografi dan Model Kotak
- Asas Display: block inline flex grid
- Kedudukan: relative absolute fixed sticky