유사 요소를 상위 요소 아래에 쌓을 수 있나요?

의사 요소 스태킹 순서가 상위 요소 아래로 갈 수 있나요?

CSS에서 :after 및 :before 의사 요소는 관련 요소의 콘텐츠 앞뒤에 나타납니다. . 기본 스택 순서는 의사 요소를 상위 요소 위에 배치하지만 특정 시나리오에서는 반전이 필요합니다.

문제:

의사 요소의 z-index 속성을 설정하려고 합니다. -부모 요소보다 아래에 있는 요소는 종종 위에 나타나는 결과를 낳습니다. 대신.

해결책:

의사 요소를 상위 요소 아래에 배치하려면 새 스택 컨텍스트를 생성하세요.

1. 절대 위치 지정: 의사 요소를 position:absolute로 설정하면 새로운 스태킹 컨텍스트가 설정되어 z-index가 활성화됩니다. control.
2. Z-색인 할당: 상위 요소의 Z-색인보다 낮은 Z-색인 값을 할당하여 그 아래에 의사 요소를 배치합니다.

예:

#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 */
}

이 접근 방식은 세밀한 제어를 제공합니다. 스태킹 순서에 따라 관련 상위 요소를 기준으로 의사 요소의 원하는 위치를 얻을 수 있습니다.

위 내용은 유사 요소를 상위 요소 아래에 쌓을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!