Penentududukan CSS: Panduan Terbaik Anda untuk Peletakan Elemen

Helo orang hebat, selamat datang kembali ke blog saya! ?

Sama ada anda seorang pembangun yang berpengalaman atau hanya menggunakan CSS, artikel ini akan memberi anda beberapa pengetahuan dan contoh tambahan!

Pengenalan kepada Penentududukan CSS

Kedudukan CSS menentukan di mana elemen akan muncul dalam aliran dokumen. Secara lalai, semua elemen mengikut aliran semula jadi dari kiri ke kanan dan atas ke bawah , yang dikenali sebagai kedudukan statik

. Walau bagaimanapun, CSS menyediakan empat mod kedudukan lain yang membolehkan kawalan yang lebih kreatif ke atas peletakan elemen.

Kedudukan Statik - Gelagat Lalai

Apabila elemen mempunyai kedudukan: statik (lalai), ia diletakkan mengikut aliran biasa* halaman. Anggap ia sebagai elemen yang berbaris satu demi satu, tanpa perhatian khusus terhadap penempatannya di luar struktur dokumen semula jadi.

Contoh:

.static-element { position: static;}

Aliran Biasa: Elemen dibentangkan satu demi satu, dari kiri ke kanan, atas ke bawah, melainkan diubah suai oleh pelampung, kotak lentur atau grid.

?Senang tahu

:

• Elemen Sekat

  : Ia disusun secara menegak, dengan setiap elemen baharu bermula di bawah yang terakhir.

• Elemen Sebaris

  : Ia mengalir secara mendatar, mengambil hanya lebar yang diperlukan oleh kandungannya.

Kedudukan Relatif - Anjakan dalam Perspektif

Kedudukan relatif

mengalihkan elemen berbanding kedudukan biasa tanpa mengubah reka letak di sekelilingnya. Ini seperti menolak elemen sedikit daripada tempat asalnya tetapi mengekalkan ruangnya dalam aliran dokumen.

Contoh:

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?Baik untuk diketahui

: Kedudukan relatif adalah mudah tetapi sering disalahertikan:

• Mengekalkan Ruang

  : Ruang asal elemen dalam reka letak dikekalkan.

• Offset

  : Gunakan atas, kanan, bawah, kiri untuk mengalihkannya daripada kedudukan biasa.

Kedudukan Mutlak - Semangat Bebas

Kedudukan mutlak

mengalih keluar elemen daripada aliran dokumen sepenuhnya. Ia kemudian meletakkannya secara relatif kepada nenek moyang kedudukannya yang terdekat atau, jika tidak ada, blok mengandungi awal (biasanya elemen ).

Contoh:

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

?Baik untuk mengetahui:

<script> // Detect dark theme var iframe = document.getElementById('tweet-1848997429565149264-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1848997429565149264&theme=dark" } </script>

• Dialih keluar daripada Aliran: Ia tidak menjejaskan kedudukan elemen lain.
• Berkaitan dengan Moyang Berada: Jika tiada moyang diletakkan, ia berkaitan dengan blok mengandungi awal (biasanya ).

Kedudukan Tetap - Disemat pada Skrin

Elemen dengan kedudukan tetap diposisikan berbanding dengan port pandangan. Ia tidak bergerak apabila halaman ditatal, menjadikannya sesuai untuk elemen seperti bar navigasi atau pop timbul.

Contoh:

.static-element { position: static;}

?Baik untuk mengetahui:

• Tidak Tatal: Mereka kekal di tempatnya, mengabaikan kedudukan tatal, yang bagus untuk pengepala atau pemberitahuan.

Kedudukan Melekit - Menyesuaikan diri dengan Tatal Pengguna

Kedudukan melekat bermula dengan aliran seperti statik tetapi boleh menjadi tetap apabila ambang tatal dipenuhi. Ia sesuai untuk pengepala yang anda mahu kekal dalam paparan semasa menatal.

Contoh:

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?Baik untuk mengetahui:

• Bermula Statik: Sehingga ia mencapai ambangnya, kemudian ia menjadi tetap.

Salah Faham dan Petua Biasa

• Terlalu Banyak Penggunaan Mutlak: Walaupun berkuasa, terlalu banyak menggunakan kedudukan mutlak boleh membawa kepada isu reka letak, terutamanya dengan kandungan yang mengubah saiz atau apabila elemen bertindih secara tidak dijangka.
• Z-Indeks dengan Penentududukan: Ingat, elemen diposisikan boleh menggunakan indeks-z untuk mengawal susunan tindanan, tetapi indeks-z hanya berfungsi dengan elemen diposisikan.
• Prestasi dengan Tetap: Terlalu banyak elemen tetap boleh menjejaskan prestasi, terutamanya pada peranti mudah alih yang unsur tetap mungkin tidak mengalir semula dengan betul.
• Tatal dan Elemen Tetap: Berhati-hati dengan elemen tetap yang mungkin meliputi kandungan. Sentiasa sediakan cara untuk pengguna berinteraksi dengan halaman di sebalik elemen ini.

Contoh Praktikal

Mari kita buat reka letak yang menunjukkan setiap jenis kedudukan.

?Cari contoh pada CodePen juga.

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

Contoh ini mempamerkan setiap kaedah kedudukan dalam tindakan. Anda akan melihat bagaimana elemen berkelakuan berbeza apabila anda menatal atau mengubah saiz tetingkap.

Teknik dan Pertimbangan Lanjutan

• Z-Index: Walaupun kita menyebutnya, mari kita menyelam lebih mendalam. Z-index hanya berfungsi pada elemen kedudukan (relatif, mutlak, tetap) dan konteks tindanan boleh merumitkan tingkah lakunya.
• Menggabungkan Kedudukan: Kadangkala, sesuatu elemen mungkin memerlukan kedua-dua kedudukan relatif dan mutlak untuk tujuan yang berbeza

• Reka Bentuk Responsif: Pertimbangkan cara kedudukan berbeza bertindak merentas saiz skrin. Pembetulan mungkin meliputi kandungan penting pada skrin yang lebih kecil.

• Kebolehaksesan: Pastikan elemen tetap atau melekit tidak menghalang pembaca skrin atau navigasi papan kekunci.

Berlatih dengan Aplikasi Dunia Nyata

Jika anda ingin melatih kemahiran anda, anda boleh cuba membina ini:

• Elemen Navigasi: Pengepala atau pengaki tetap atau melekit.
• Petua alat atau Modal: Diposisikan secara mutlak berbanding bekas induk.
• Kesan Paralaks: Menggabungkan latar belakang kedudukan tetap dengan kandungan menatal.

Tajuk Melekit & Lagi ~ Contoh

Berikut ialah contoh yang menunjukkan elemen navigasi (pengepala tetap, pengaki melekit), petua alat (berkedudukan mutlak) dan kesan paralaks ringkas:

?Cari keseluruhan kod dan semak hasilnya pada Codepen.

Teknik Kedudukan CSS ~ Contoh

Contoh yang anda boleh lihat di bawah menunjukkan teknik kedudukan CSS yang berbeza menggunakan HTML dan CSS.

?Cari keseluruhan kod dan semak hasilnya pada Codepen.

.static-element { position: static;}

• Pengepala Tetap :
  
  Menunjukkan kedudukan: tetap yang mengekalkan pengepala di bahagian atas port pandangan tanpa mengira menatal.

• Elemen Statik :
  
  Menunjukkan kedudukan lalai di mana elemen muncul dalam aliran dokumen biasa.

• Elemen Relatif dan Mutlak :
  
  Kotak relatif ialah bekas dengan kedudukan relatif, dan di dalamnya, terdapat elemen yang diposisikan secara mutlak. Struktur ini menunjukkan cara unsur mutlak meletakkan dirinya secara relatif kepada nenek moyang kedudukan terdekatnya (dalam kes ini, kotak relatif).

• Elemen Melekit :
  
  Menggunakan kedudukan: melekit, yang bermula sebagai statik tetapi menjadi tetap apabila ia mencapai ambang tatal tertentu.
  

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

• Badan: Tetapkan pada ketinggian yang tinggi untuk membolehkan penatalan, yang diperlukan untuk menunjukkan kesan jenis kedudukan yang berbeza.

• Pengepala Tetap: Digayakan untuk sentiasa berada di bahagian atas dengan latar belakang biru untuk keterlihatan.

• Bekas: Menyediakan beberapa konteks untuk elemen yang diletakkan di dalamnya.

• Elemen Statik, Relatif, Mutlak, Melekit: Setiap satu mempunyai gaya yang berbeza untuk membezakan secara visual tingkah laku kedudukan mereka:

• Kekal statik dalam aliran dokumen biasa.

• Relatif didorong dari kedudukan biasa tetapi masih menempati ruang asalnya dalam reka letak.

• Mutlak diletakkan secara relatif kepada kotak relatif, yang menunjukkan cara kedudukan mutlak berfungsi dalam induk yang diposisikan.

• Melekit bermula di mana ia akan secara statik tetapi "melekat" sebaik sahaja menatal melepasi ambang yang ditetapkan.

Kesimpulan

Begitulah! Anda kini dilengkapi dengan pengetahuan untuk meletakkan elemen dengan ketepatan, mengubah reka bentuk web anda daripada asas kepada menakjubkan. Ingat, amalan membuat sempurna, jadi selami projek anda dan mula bereksperimen dengan kedudukan CSS. Selamat mengekod!

---

? Helo, saya Eleftheria, Pengurus Komuniti, pembangun, penceramah awam dan pencipta kandungan.

? Jika anda menyukai artikel ini, pertimbangkan untuk berkongsinya.

? Semua pautan | X | LinkedIn

Atas ialah kandungan terperinci Penentududukan CSS: Panduan Terbaik Anda untuk Peletakan Elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!