Mendedahkan nilai atribut biasa bagi kedudukan mutlak: meningkatkan ketepatan reka bentuk

Pendedahan nilai atribut biasa​​​kedudukan mutlak: Untuk menjadikan reka bentuk anda lebih tepat, contoh kod khusus diperlukan

Kedudukan mutlak ialah kaedah reka letak biasa dalam reka bentuk web dengan menetapkan atribut kedudukan dan atribut kedudukan daripada elemen, anda boleh Meletakkan elemen tepat ke lokasi yang ditentukan. Apabila menggunakan kedudukan mutlak, kita selalunya perlu menggunakan beberapa nilai atribut untuk menetapkan kedudukan khusus elemen Artikel ini akan mendedahkan nilai atribut biasa kedudukan mutlak dan menyediakan beberapa contoh kod khusus untuk membantu anda menggunakan dengan lebih baik. kedudukan mutlak untuk mencapai reka bentuk yang tepat.

1. Atribut kedudukan

Atribut kedudukan digunakan untuk menetapkan kaedah kedudukan elemen Terdapat empat nilai yang biasa digunakan: statik, relatif, mutlak dan tetap. Antaranya, kedudukan mutlak biasanya menggunakan nilai mutlak, jadi kita perlu terlebih dahulu memahami penggunaan khusus nilai ini.

1. mutlak

nilai mutlak menyebabkan kedudukan unsur ditentukan secara relatif kepada unsur nenek moyang kedudukan terdekat (unsur yang kedudukannya tidak statik). Jika tiada unsur nenek moyang sedemikian wujud, elemen tersebut diletakkan secara relatif kepada blok yang mengandungi awal (biasanya tetingkap penyemak imbas).

Atribut kedua, atas, kanan, bawah dan kiri

Atribut atas, kanan, bawah dan kiri digunakan untuk menetapkan mengimbangi kedudukan sesuatu elemen berbanding dengan elemen induk yang diposisikan. Nilai atribut ini boleh berupa nilai piksel, nilai peratusan atau auto.

1. top

sifat atas digunakan untuk menetapkan offset elemen daripada bahagian atas elemen induk. Apabila nilai ialah nombor positif, ia bermakna unsur itu dianjak ke bawah;

Kod sampel:

.positioned-element {
  position: absolute;
  top: 20px;
}

2. kanan

sifat kanan digunakan untuk menetapkan offset elemen dari sebelah kanan elemen induk. Apabila nilai ialah nombor positif, ia bermakna elemen diimbangi ke kiri;

Kod sampel:

.positioned-element {
  position: absolute;
  right: 10%;
}

3. bottom

Sifat bawah digunakan untuk menetapkan offset elemen dari bahagian bawah elemen induk. Apabila nilai ialah nombor positif, ia bermakna elemen itu dianjak ke atas;

Kod sampel:

.positioned-element {
  position: absolute;
  bottom: 50px;
}

4. left

Sifat kiri digunakan untuk menetapkan offset elemen dari sebelah kiri elemen induk. Apabila nilainya ialah nombor positif, ia bermakna elemen itu dialihkan ke kanan;

Kod sampel:

.positioned-element {
  position: absolute;
  left: 30%;
}

Dengan menetapkan nilai atribut atas, kanan, bawah dan kiri, kita boleh mencapai kedudukan tepat elemen dalam elemen induk. Nilai offset yang berbeza boleh digabungkan mengikut keperluan reka bentuk untuk mencapai kesan kedudukan yang diingini.

3. Atribut z-index

Atribut z-index digunakan untuk menetapkan susunan susunan elemen, iaitu, untuk menentukan susunan elemen dipaparkan pada halaman. Nilai indeks-z boleh menjadi integer, dengan nilai yang lebih besar meletakkan elemen di atas nilai yang lebih kecil.

Contoh kod:

.positioned-element-1 {
  position: absolute;
  z-index: 2;
}

.positioned-element-2 {
  position: absolute;
  z-index: 1;
}

Dalam kod di atas, nilai z-indeks elemen-elemen-1 kedudukan adalah lebih besar, jadi elemen-elemen-2 diposisikan akan diliputi dalam halaman.

Ringkasnya, nilai atribut biasa​​​untuk kedudukan mutlak termasuk kedudukan, atas, kanan, bawah, kiri dan indeks-z. Dengan menggunakan nilai atribut ini secara rasional, kita boleh meletakkan elemen dengan tepat dan mencapai kesan reka bentuk yang lebih tepat. Dalam aplikasi praktikal, nilai atribut ini boleh dilaraskan mengikut keperluan reka bentuk khusus untuk memenuhi keperluan kedudukan yang berbeza.

Atas ialah kandungan terperinci Mendedahkan nilai atribut biasa bagi kedudukan mutlak: meningkatkan ketepatan reka bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!