상위 요소 아래에 의사 요소를 배치하려면 어떻게 해야 합니까?

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

:after 의사 요소를 사용하여 요소의 스타일을 지정하려고 하는데 ::after 요소가 요소 자체 위에 있는 것 같습니다.

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position: relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

의사 요소를 배치하기 위해 스택 순서를 변경할 수 있습니까? 상위 아래에 있습니까?

답변: 스택 컨텍스트 조작

의사 요소는 사실상 상위 요소의 하위 요소입니다. 기본 쌓임 순서를 수정하고 의사 요소를 상위 요소 아래에 배치하려면 새로운 쌓임 컨텍스트를 설정해야 합니다. 이는 절대 위치 지정과 "auto"가 아닌 z-index 값을 의사 요소에 적용하여 수행됩니다.

#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!