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

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

CSS 스타일링에서 ::after 또는 ::before와 같은 의사 요소는 연결된 항목의 하위 요소로 간주됩니다. 강요. 일반적으로 상위 요소 위에 나타납니다. 상위 요소 아래에 의사 요소를 배치하려면 새 스택 컨텍스트를 설정하여 기본 스택 순서를 변경해야 합니다.

의사 요소를 절대 요소로 배치하고 기본값이 아닌 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 */
}

이 예에서 의사 요소 ::after는 절대 위치에 지정되고 z-가 부여됩니다. -1의 인덱스 값. 그러면 상위 요소 #element 뒤에 배치됩니다. 후자의 기본 z-인덱스는 0입니다.

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