Bolehkah Elemen Pseudo Ditindan Di Bawah Elemen Induknya?

Bolehkah Susunan Susunan Unsur Pseudo berada di Bawah Induknya?

Dalam CSS, :selepas dan :sebelum unsur pseudo muncul selepas dan sebelum kandungan unsur yang berkaitan . Walaupun susunan susunan lalai meletakkan elemen pseudo di atas induknya, senario tertentu memerlukan pembalikan.

Masalah:

Percubaan untuk menetapkan sifat indeks z bagi pseudo -elemen di bawah elemen induknya sering menyebabkan ia muncul di atas sebaliknya.

Penyelesaian:

Untuk meletakkan elemen pseudo di bawah induknya, buat konteks tindanan baharu.

1. Kedudukan Mutlak: Menetapkan elemen pseudo kepada kedudukan: mutlak mewujudkan konteks tindanan baharu, mendayakan kawalan indeks-z.
2. Tugasan Indeks-Z: Tetapkan nilai indeks-z yang lebih rendah daripada indeks-z induk untuk meletakkan elemen pseudo di bawahnya.

Contoh:

#element {
  position: relative;  /* optional */
  width: 100px;
  height: 100px;
  background-color: blue;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;

  /* create a new stacking context */
  position: absolute;
  z-index: -1;  /* to be below the parent element */
}

Pendekatan ini menyediakan kawalan terperinci ke atas susunan susunan, membolehkan anda mencapai kedudukan unsur pseudo yang diingini berbanding induknya yang berkaitan.

Atas ialah kandungan terperinci Bolehkah Elemen Pseudo Ditindan Di Bawah Elemen Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!