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!