CSS 의사 요소를 상위 요소 아래에 배치할 수 있나요?

CSS 스택 순서: 의사 요소를 상위 요소 아래에 배치할 수 있나요?

:after 의사 요소를 사용하여 요소의 스타일을 지정할 때, 의사 요소는 항상 상위 요소 위에 있는 것처럼 보일 수 있습니다. 이는 의사 요소가 본질적으로 연관된 요소의 후손으로 처리되고 동일한 스택 컨텍스트를 상속하기 때문입니다.

해결책: 새 스택 컨텍스트 생성

상위 요소 아래에 의사 요소가 있는 경우 새 스택 컨텍스트를 생성해야 합니다. 이는 의사 요소를 절대적으로 배치하고 "auto" 이외의 z-index 값을 할당하여 달성할 수 있습니다.

다음 CSS 및 HTML 코드를 고려하세요.

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

설명:

• #element div에는 절대 위치에 대한 컨텍스트를 제공하기 위해 상대 위치가 지정됩니다. 위치 지정.
• :after 의사 요소는 콘텐츠와 크기로 정의됩니다.
• 의사 요소는 절대적으로 위치가 지정되고 음수 Z 인덱스(-1)가 할당되어 위치를 보장합니다.

이 새로운 스택 컨텍스트를 사용하면 이제 :after 의사 요소를 상위 요소의 속성에 관계없이 #element div 아래에 배치할 수 있습니다. 쌓이는 순서.

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