Kaedah susun atur Kedudukan CSS untuk mencapai kesan tindanan berbilang lapisan

Kaedah susun atur Kedudukan CSS untuk mencapai kesan tindanan berbilang lapisan memerlukan contoh kod khusus

Dalam reka bentuk web, kita selalunya perlu melaksanakan kesan tindanan berbilang lapisan untuk memaparkan elemen berbeza pada tahap yang berbeza. CSS menyediakan pelbagai sifat kedudukan yang boleh membantu kami mencapai kesan ini. Dalam artikel ini, kami akan meneroka cara menggunakan reka letak Kedudukan CSS untuk mencapai kesan tindanan berbilang lapisan dan memberikan contoh kod yang sepadan.

1. Kedudukan mutlak

Kedudukan mutlak ialah salah satu kaedah penentududukan yang paling biasa digunakan dalam CSS Dengan menggunakan kedudukan mutlak, anda boleh meletakkan elemen berbanding dengan elemen nenek moyangnya yang tidak statik.

Contoh kod:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.layer1, .layer2, .layer3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
}

Dalam kod di atas, kami mencipta elemen kontena, menetapkannya kepada kedudukan relatif (kedudukan: relatif), dan kemudian mencipta tiga elemen lapisan dalam bekas , masing-masing ditetapkan kepada kedudukan mutlak (kedudukan: mutlak). Dengan melaraskan sifat atas dan kiri elemen lapisan, ia kelihatan secara menegak dan mendatar berpusat dalam bekas. Warna latar belakang elemen pada lapisan berbeza adalah berbeza untuk mencapai kesan tindanan.

2. Kedudukan tetap

Kedudukan tetap ialah kaedah penentududukan mutlak khas Dengan menetapkan kedudukan elemen kepada tetap, elemen boleh diposisikan secara relatif kepada tetingkap penyemak imbas kedudukan yang ditetapkan.

Contoh kod:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  width: 100%;
  height: 1000px;
}

.layer1, .layer2, .layer3 {
  position: fixed;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
}

Dalam kod di atas, kami mencipta elemen bekas dan menetapkan lebarnya kepada 100% dan ketinggian kepada 1000px. Kemudian tiga elemen lapisan dicipta dalam bekas, juga ditetapkan kepada kedudukan tetap (kedudukan: tetap). Letakkan elemen lapisan berbanding sudut kiri atas tetingkap penyemak imbas dengan menetapkan sifat atas dan kirinya.

3. Kedudukan relatif

Kedudukan relatif adalah untuk meletakkan elemen secara relatif kepada kedudukan normalnya diposisikan mengikut aliran dokumen biasa.

Contoh kod:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  width: 400px;
  height: 400px;
}

.layer1, .layer2, .layer3 {
  position: relative;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
  z-index: 3;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
  z-index: 1;
}

Dalam kod di atas, kami mencipta elemen bekas dan mencipta tiga elemen lapisan dalam bekas, menetapkan atribut kedudukannya kepada relatif. Laraskan kedudukan elemen lapisan dengan menetapkan atribut atas dan kiri, dan atribut z-index digunakan untuk menentukan hubungan hierarki lapisan.

Ringkasan:

Dengan menggunakan reka letak Kedudukan CSS, kami boleh mencapai kesan tindanan berbilang lapisan. Kedudukan mutlak, kedudukan tetap dan kedudukan relatif semuanya boleh digunakan untuk mencapai kesan tindanan yang mana kaedah penentududukan digunakan bergantung pada keperluan khusus. Semasa menulis kod, kita perlu menggunakan sifat penentududukan ini secara fleksibel dan menggabungkannya dengan sifat CSS lain untuk mencapai kesan tindanan yang diingini.

Atas ialah kandungan terperinci Kaedah susun atur Kedudukan CSS untuk mencapai kesan tindanan berbilang lapisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!