Rumah >hujung hadapan web >tutorial css >Analisis sifat cascading CSS: indeks-z dan kedudukan
Analisis sifat cascading CSS: indeks-z dan kedudukan
- 王林asal
- 2023-10-20 09:27:331501semak imbas
Analisis atribut melata CSS: indeks-z dan kedudukan
Dalam CSS, indeks-z dan kedudukan ialah dua atribut melata yang biasa digunakan, yang digunakan untuk mengawal susunan susunan dan kedudukan elemen. Artikel ini akan menganalisis kedua-dua sifat ini secara terperinci dan memberikan contoh kod yang berkaitan.
1. Atribut z-index
Atribut z-index digunakan untuk mengawal susunan susunan elemen. Ia menerima nilai integer sebagai parameter Semakin besar nilai, semakin tinggi elemen dipaparkan. Secara lalai, nilai indeks z sesuatu elemen ialah 0.
Sintaks: indeks-z: nilai berangka;
Perlu diambil perhatian bahawa hanya elemen yang diposisikan (iaitu elemen yang nilai kedudukannya adalah relatif, mutlak atau tetap) boleh menggunakan atribut indeks-z. Atribut indeks-z bagi elemen diposisikan mempengaruhi susunan paparan anak-anaknya dan elemen ibu bapa dan adik-beradik yang lain.
Berikut ialah contoh yang menunjukkan penggunaan atribut indeks-z:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>Dalam kod di atas, div1 dan div2 masing-masing ialah dua elemen kedudukan Nilai indeks-z div2 adalah lebih besar, jadi div2 akan meliputi div1 ditunjukkan di atas.
2. Atribut kedudukan
Atribut kedudukan digunakan untuk mengawal kedudukan elemen. Nilai biasa adalah statik, relatif, mutlak dan tetap.
- statik: Nilai lalai. Elemen mengikut susun atur aliran dokumen biasa dan tidak menjalani sebarang kedudukan khas.
- relatif: kedudukan relatif. Elemen diposisikan secara relatif kepada kedudukan normalnya. Kedudukan elemen boleh dilaraskan melalui atribut atas, bawah, kiri dan kanan.
- mutlak: kedudukan mutlak. Elemen diposisikan secara relatif kepada nenek moyang kedudukan terdekatnya, atau blok mengandungi asalnya jika tiada moyang diposisikan.
- ditetapkan: Kedudukan tetap. Elemen diletakkan secara relatif kepada tetingkap penyemak imbas dan kedudukannya tidak berubah walaupun halaman itu ditatal.
Berikut ialah contoh yang menunjukkan penggunaan atribut kedudukan:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>Dalam kod di atas, div2 menggunakan atribut position:absolute untuk meletakkannya berbanding div1. Dengan melaraskan nilai atribut atas dan kiri, kedudukan div2 boleh diubah.
Ringkasan:
z-indeks dan kedudukan adalah sifat tindanan yang biasa digunakan dalam CSS. Ia boleh mengawal susunan susunan dan kedudukan elemen. Dengan menggunakan kedua-dua atribut ini secara rasional, kesan susun atur halaman yang kaya dan pelbagai boleh dicapai.
Di atas ialah analisis sifat melata CSS z-index dan kedudukan, serta contoh kod yang berkaitan. Semoga ia membantu.
Atas ialah kandungan terperinci Analisis sifat cascading CSS: indeks-z dan kedudukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!