의사 요소의 적층 순서를 부모 요소 아래에 설정할 수 있습니까?
나는 요소를 사용하여 스타일링하려고 합니다.:after의사 요소 CSS 선택기
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
그것은 마치.::after요소는 요소 자체보다 낮을 수 없습니다.
유사 요소를 요소 자체보다 낮게 설정할 수 있는 방법이 있습니까?
유사 요소는 연관된 요소의 하위 요소로 취급됩니다.유사 요소를 상위 요소 아래에 배치하려면 새 적층 컨텍스트를 만들어 기본 적층 순서를 변경해야 합니다.
의사 요소(절대)의 위치를 지정하고 "auto" 이외의 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 */
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position a pseudo-element below its parent</title>
</head>
<body>
<div id="element">
</div>
</body>
</html>저는 이것이 오래된 실이라는 것을 알지만, 적절한 답을 게시해야 한다고 느낍니다.이 질문에 대한 실질적인 답은 의사 요소가 있는 요소의 상위에 새 적층 컨텍스트를 만들어야 한다는 것입니다(그리고 실제로는 위치만 지정하는 것이 아니라 z 인덱스를 지정해야 함).
다음과 같은 경우:
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }
/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }<div id="parent">
<div id="pseudo-parent">
</div>
</div>해보세요.
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
여기에는 두 가지 문제가 있습니다.
CSS 2.1 규격에는 다음과 같이 명시되어 있습니다.
:before그리고.:after유사 elements 요소는 마치 실제 요소가 연관된 요소 안에 삽입된 것처럼 런인 박스와 같은 다른 상자와 상호 작용합니다."대부분의 브라우저에서 z 인덱스를 구현하는 방식을 고려할 때, 모든 브라우저에서 작동하는 DOM의 상위 요소의 z 인덱스보다 콘텐츠를 낮게 이동하는 것은 상당히 어렵습니다(읽기, 방법을 모르겠습니다).위의 숫자 1이 반드시 불가능하다는 것을 의미하는 것은 아니지만, 두 번째 장애는 실제로 더 심각합니다.궁극적으로는 브라우저 지원의 문제입니다.파이어폭스는 FF3.6까지 생성된 콘텐츠의 포지셔닝을 전혀 지원하지 않았습니다.IE 같은 브라우저에 대해 아는 사람.따라서 한 브라우저에서 작동할 수 있는 해킹을 찾을 수 있다 하더라도 해당 브라우저에서만 작동할 가능성이 매우 높습니다.
브라우저 전체에서 작동할 것이라고 생각하는 것은 CSS가 아닌 자바스크립트를 사용하여 요소를 삽입하는 것뿐입니다.그게 좋은 해결책이 아니라는 건 알지만,:before그리고.:after사이비 선택자들은 여기서 자를 것 같지 않아요
사양과 관련하여 말씀드립니다(http://www.w3.org/TR/CSS2/zindex.html), . 이후a.someSelector아이들이 빠져나올 수 없는 새로운 적층 맥락을 만들어 낸다는 것입니다.ea.someSelector를 정하지 않은 를 낳습니다.a.someSelector:after다와 같은 할 수 .a.someSelector.
이 질문이 오래된 것이고 대답이 받아들여지는 것은 알지만, 그 문제에 대한 더 나은 해결책을 찾았습니다.중복 질문을 만들지 않기 위해 여기에 글을 올립니다. 그리고 해결책은 여전히 다른 사람들이 사용할 수 있습니다.
요소의 순서를 바꿉니다.용을 합니다.:before아래에 있어야 할 내용에 대해 유사 element을 수행하고 마진을 조정하여 보상합니다. 수 ez-index보존될 것입니다.
IE8과 FF3.6으로 테스트를 성공적으로 마쳤습니다.
z-index:before아니면:after고를다로 .positionz-indexabsolute,relative, 아니면fixed) 합니다. 이것은 의사 요소가z-index입니다가입니다.<html>입니다의 입니다.다의 .<html>.
는 가 (는입니다) 입니다.:after입니다가 있는 을 두고 하기 위한 .z-index도를어합니다.z-index14의 경우, 여전히 부모님 위에서 렌더링되고 있었습니다.그 ,에서,z-index0의
그것이 무슨 일이 일어나고 있는지를 조금 더 명확히 하는데 도움이 되기를 바랍니다.
아주 간단하게 고쳤습니다.
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: -1;
}
이 작업은 부모를 z-index: 1에 스택하는 것으로, z-index: 0에 다른 돔 요소가 '존재'하므로 자식에게 z-index: 0에 '종영'할 수 있는 공간을 제공합니다.부모에게 z 인덱스를 1로 지정하지 않으면 자식은 다른 돔 요소 아래로 끝나므로 보이지 않습니다.
다음과 같은 유사 요소에 대해서도 작동합니다.
누군가가 이것에 대해 같은 문제를 가지고 있을지 모르겠습니다.선택한 답변이 부분적으로 정확합니다.
필요한 것은 다음과 같습니다.
parent{
z-index: 1;
}
child{
position:relative;
backgr
언급URL : https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e
'programing' 카테고리의 다른 글
| WooCommerce 주문 항목 및 메타 데이터를 검색하기 위한 SQL 선택 쿼리 (0) | 2023.10.19 |
|---|---|
| 동일한 라인에서 날짜 및 시간 가져오기 (0) | 2023.10.19 |
| 선택한 열에 대해 표에서 NA 값을 바꾸는 방법 (0) | 2023.10.14 |
| 데이터베이스 풀링이란 무엇입니까? (0) | 2023.10.14 |
| signalR : /signalr/hubs가 생성되지 않음 (0) | 2023.10.14 |