Kuasai nilai atribut biasa bagi kedudukan mutlak dan biarkan elemen halaman anda diletakkan mengikut kehendak anda

Kuasai nilai atribut biasa​​​kedudukan mutlak dan biarkan elemen halaman anda diletakkan mengikut kehendak anda. . Dengan menguasai nilai atribut biasa kedudukan mutlak, kita boleh mengawal kedudukan dan susun atur elemen halaman dengan mudah.

1. Konsep asas elemen kedudukan

Sebelum menggunakan kedudukan mutlak, kita perlu memahami beberapa konsep asas. Elemen induk merujuk kepada elemen moyang dengan atribut kedudukan, dan elemen anak merujuk kepada elemen yang perlu diletakkan. Apabila menggunakan kedudukan mutlak, kita boleh melaraskan kedudukan elemen anak dengan menetapkan nilai atribut seperti atas, bawah, kiri dan kanan.

2. Nilai atribut biasa kedudukan mutlak

Dalam kedudukan mutlak, kami sering menggunakan nilai atribut berikut untuk mengawal kedudukan dan susun atur elemen:

(1) atribut atas

Dengan menetapkan atribut teratas nilai, kita boleh menentukan anak Jarak antara elemen dan bahagian atas elemen induknya. Kod sampel adalah seperti berikut:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(2) atribut bawah

Dengan menetapkan nilai atribut bawah, kita boleh menentukan jarak antara elemen anak dan bahagian bawah elemen induk. Kod sampel adalah seperti berikut:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(3) atribut kiri

Dengan menetapkan nilai atribut kiri, kita boleh menentukan jarak antara elemen anak dan bahagian kiri elemen induk. Kod sampel adalah seperti berikut:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(4) atribut kanan

Dengan menetapkan nilai atribut yang betul, kita boleh menentukan jarak antara elemen anak dan bahagian kanan elemen induk. Kod sampel adalah seperti berikut:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

3 Nota

Apabila menggunakan kedudukan mutlak, kita perlu memberi perhatian kepada perkara berikut:

(1) Elemen induk perlu menetapkan atribut kedudukan

Jika elemen induk tidak menetapkan atribut kedudukan (kedudukan: relatif /mutlak/tetap), elemen anak tidak boleh diletakkan melalui atribut atas, bawah, kiri dan kanan.

(2) Lebar dan tinggi elemen anak ditetapkan relatif kepada elemen induk

Dalam kedudukan mutlak, lebar dan tinggi elemen anak biasanya ditetapkan relatif kepada elemen induk. Sudah tentu, kita juga boleh menggunakan peratusan untuk menetapkan lebar dan ketinggian serta menyesuaikannya mengikut saiz elemen induk.

(3) Pertindihan kedudukan elemen

Apabila menggunakan kedudukan mutlak, jika kedudukan sub-elemen bertindih, sub-elemen kemudian akan meliputi sub-elemen yang lebih awal.

Kesimpulan

Dengan menguasai nilai atribut biasa​​​kedudukan mutlak, kita boleh merealisasikan peletakan percuma elemen halaman dengan mudah. Walau bagaimanapun, dalam penggunaan sebenar, kita perlu memberi perhatian kepada menetapkan sifat kedudukan elemen induk dan elemen anak secara munasabah, serta pertindihan kedudukan elemen, untuk memastikan keindahan dan kebolehbacaan reka letak halaman.

Di atas adalah pengenalan kepada nilai atribut biasa untuk menguasai kedudukan mutlak. Saya harap ia akan membantu semua orang. Saya percaya bahawa kod yang ditulis dalam amalan akan membantu anda lebih memahami dan menguasai nilai atribut ini, supaya elemen halaman anda boleh diletakkan mengikut kehendak anda.

Atas ialah kandungan terperinci Kuasai nilai atribut biasa bagi kedudukan mutlak dan biarkan elemen halaman anda diletakkan mengikut kehendak anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!