Analisis sifat cascading CSS: indeks-z dan kedudukan-tutorial css-php.cn

Analisis sifat cascading CSS: indeks-z dan kedudukan

王林

Lepaskan： 2023-10-20 09:27:33

asal

1499 orang telah melayarinya

CSS 层叠属性解析：z-index 和 position

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!