Kedudukan CSS – Mutlak, Relatif, Tetap dan Melekit.

Kuliah 11: Kedudukan CSS – Mutlak, Relatif, Tetap dan Melekat

Selamat datang ke kuliah kesebelas kursus "Asas kepada Kecemerlangan". Dalam kuliah ini, kita akan meneroka pelbagai jenis kedudukan CSS: relatif, mutlak, tetap dan melekit. Memahami kedudukan membolehkan anda mengawal tempat elemen muncul pada halaman dan cara ia berkelakuan semasa pengguna berinteraksi dengan kandungan.

1. Memahami kedudukan Harta

Harta kedudukan menentukan cara sesuatu elemen diletakkan dalam dokumen. Ia boleh mengambil nilai berikut:

• statik: Nilai lalai. Elemen diletakkan mengikut aliran dokumen biasa.
• relatif: Elemen diletakkan secara relatif kepada kedudukan normalnya.
• mutlak: Elemen diposisikan secara relatif kepada nenek moyang kedudukan terdekatnya atau blok mengandungi awalan.
• ditetapkan: Elemen diletakkan relatif kepada tetingkap penyemak imbas dan kekal dalam kedudukan yang sama semasa menatal.
• melekit: Elemen dianggap sebagai relatif sehingga ia mencapai ambang (cth., kedudukan tatal), dan kemudian ia menjadi tetap.

2. Kedudukan Relatif

Elemen dengan kedudukan: relatif diposisikan secara relatif kepada kedudukan asalnya (statik). Ia kekal dalam aliran dokumen, bermakna elemen lain masih akan mengambil kiranya.

• Contoh: Menggunakan kedudukan relatif untuk memindahkan elemen.

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

Dalam contoh ini, elemen dianjakkan ke bawah sebanyak 20px dan ke kanan sebanyak 30px daripada kedudukan asalnya, tetapi ruangnya dalam aliran dokumen dikekalkan.

3. Kedudukan Mutlak

Elemen dengan kedudukan: mutlak dialih keluar daripada aliran dokumen dan diletakkan relatif kepada nenek moyang kedudukan terdekatnya (iaitu, moyang dengan kedudukan selain statik).

• Contoh: Meletakkan elemen secara mutlak di dalam bekas.

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

Dalam contoh ini:

• Kotak .box benar-benar diletakkan 50px dari atas dan 20px dari kanan di dalam elemen .container.
• Bekas .bekas mempunyai kedudukan: relatif, menjadikannya rujukan kedudukan untuk .kotak.

4. Kedudukan Tetap

Elemen dengan kedudukan: tetap diletakkan secara relatif kepada tetingkap penyemak imbas, tidak kira cara halaman itu ditatal.

• Contoh: Mencipta bar navigasi tetap.

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

Dalam contoh ini:

• Bar .nav diletakkan di bahagian atas port pandangan dan kekal tetap walaupun apabila halaman itu ditatal.

5. Kedudukan Melekit

Elemen dengan kedudukan: sticky dianggap sebagai relatif sehingga pengguna menatal melepasi ambang yang ditentukan, pada ketika itu ia menjadi tetap.

• Contoh: Pengepala melekit yang kekal di bahagian atas selepas menatal.

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

Dalam contoh ini:

• Tajuk .berkelakuan seperti elemen biasa sehingga ia mencapai bahagian atas halaman. Selepas itu, ia melekat pada bahagian atas dan kekal kelihatan semasa pengguna menatal.

6. Indeks Z

Apabila elemen diletakkan (sama ada relatif, mutlak, tetap atau melekit), anda boleh mengawal susunan tindanannya menggunakan sifat z-index. Nilai indeks z yang lebih tinggi menjadikan elemen muncul di atas yang lebih rendah.

• Contoh: Mengawal susunan susunan.

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

Dalam contoh ini:

• .box2 akan muncul di atas .box1 kerana nilai indeks znya yang lebih tinggi.

7. Menggabungkan Teknik Kedudukan

Anda boleh menggabungkan nilai kedudukan untuk membuat reka letak lanjutan.

• Contoh: Bar sisi tetap dengan kawasan kandungan relatif.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

Dalam reka letak ini:

• Bar sisi dibetulkan di sebelah kiri halaman dan kekal kelihatan apabila menatal.
• Kawasan .content diletakkan secara relatif dan melaraskan marginnya untuk mengambil kira bar sisi.

Amalkan Senaman

1. Buat halaman web dengan pengepala dan pengaki tetap serta gunakan kedudukan relatif dan mutlak untuk kandungan.
2. Tambahkan bar sisi melekit yang menjadi tetap apabila menatal.

Seterusnya: Dalam kuliah seterusnya, kami akan menyelami Transformasi dan Animasi CSS, di mana anda akan belajar cara menganimasikan elemen web anda dengan mudah. Bersedia untuk menjadikan reka bentuk anda dinamik dan interaktif!

ikuti saya di LinkedIn
Ridoy Hasan

Atas ialah kandungan terperinci Kedudukan CSS – Mutlak, Relatif, Tetap dan Melekit.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!