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

상위 요소 아래에 의사 요소 배치

CSS에서 의사 요소는 일반적으로 상위 요소를 기준으로 배치됩니다. 그러나 z-index 값을 사용하여 상위 요소 아래에 배치하려는 시도는 효과적이지 않은 것처럼 보일 수 있습니다.

의사 요소에 대한 스택 컨텍스트 생성

이 제한을 극복하려면 의사 - 요소는 새로운 스태킹 컨텍스트 내에 배치되어야 합니다. 이는 다음을 통해 달성됩니다.

• 의사 요소에 대해 위치 속성을 절대 또는 고정으로 설정합니다.
• 의사 요소에 자동이 아닌 값을 할당합니다. z-index.

예:

다음 코드를 고려하세요.

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

처음에는 #element::after pseudo -요소는 상위 요소 위에 위치합니다. 이 순서를 변경하려면:

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

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    
    /* Positioning and creating a stacking context */
    position: absolute;
    z-index: -1;
}

의사 요소에 position:absolute 및 z-index:-1을 추가하면 새로운 스택 컨텍스트가 생성됩니다. 이렇게 하면 컨텍스트 내에서 상대 위치를 유지하면서 의사 요소가 상위 요소 아래로 이동합니다.

위 내용은 상위 요소 아래에 CSS 의사 요소를 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!