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 yang 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 .berada secara mutlak 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:

• .사이드바는 페이지 왼쪽에 고정되어 스크롤할 때 계속 표시됩니다.
• .content 영역은 상대적인 위치에 있으며 사이드바를 고려하여 여백을 조정합니다.

---

연습

1. 머리글과 바닥글이 고정된 웹페이지를 만들고 콘텐츠의 상대 및 절대 위치 지정을 사용하세요.
2. 스크롤 시 고정되는 고정 사이드바를 추가하세요.

---

다음: 다음 강의에서는 CSS 변환 및 애니메이션에 대해 자세히 알아보고 웹 요소에 쉽게 애니메이션을 적용하는 방법을 배우겠습니다. 역동적이고 상호작용적인 디자인을 만들 준비를 하세요!

---

LinkedIn에서 나를 팔로우하세요
리도이 하산

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