의사 요소의 누적 순서를 부모 요소 아래에 설정할 수 있습니까?
: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>나는 이것이 오래된 스레드라는 것을 알고 있지만 적절한 답변을 게시해야한다고 생각합니다. 이 질문에 대한 실제 답은 pseudo 요소를 사용하여 요소의 부모에 새로운 스태킹 컨텍스트를 만들어야한다는 것입니다.
이처럼 :
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
: before 또는 : after 의사 요소를 사용하는 것과는 아무런 관련이 없습니다.
#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유사 요소 요소는 마치 실행 요소와 같은 다른 상자와 상호 작용하여 마치 실제 요소가 연결된 요소 내부에 삽입 된 것처럼"상호 작용합니다. " 대부분의 브라우저에서 z- 인덱스가 구현되는 방식을 고려할 때 모든 브라우저에서 작동하는 DOM에서 부모 요소의 z- 인덱스보다 콘텐츠를 이동하는 것은 매우 어렵습니다 (읽기, 방법을 모르겠습니다).위의 숫자 1이 반드시 불가능하다는 것을 의미하지는 않지만 두 번째 장애는 실제로 더 나쁩니다. 궁극적으로 브라우저 지원 문제입니다. Firefox는 FF3.6까지 생성 된 컨텐츠의 위치 지정을 전혀 지원하지 않았습니다. IE와 같은 브라우저에 대해 아는 사람 따라서 하나의 브라우저에서 작동하도록 해킹을 찾을 수 있다고해도 해당 브라우저에서만 작동 할 가능성이 큽니다.
브라우저에서 작동한다고 생각할 수있는 유일한 것은 CSS 대신 요소를 삽입하기 위해 javascript를 사용하는 것입니다. 나는이 좋은 해결책이 아니다 알고 있지만, :before그리고 :after그들이거야 여기 잘라처럼 의사 선택기는 정말 보지 않는다.
사양 ( http://www.w3.org/TR/CSS2/zindex.html ) 과 관련하여 말하면 a.someSelector위치가 지정되어 있기 때문에 하위 항목에서 벗어날 수없는 새로운 스택 컨텍스트를 만듭니다. 배치하지 않은 상태로두면 a.someSelector자식과 a.someSelector:after동일한 컨텍스트에 배치 될 수 있습니다 a.someSelector.
나는이 질문이 고대이며 대답이 맞다는 것을 알고 있지만 문제에 대한 더 나은 해결책을 찾았습니다. 중복 질문을 만들지 않기 위해 여기에 게시하고 있으며 다른 사람들이 여전히 솔루션을 사용할 수 있습니다.
요소의 순서를 바꿉니다. :before아래 내용에 의사 요소를 사용하고 보정을 위해 여백을 조정하십시오. 여백 정리는 지저분 할 수 있지만 원하는 내용 z-index은 유지됩니다.
IE8 및 FF3.6으로 이것을 성공적으로 테스트했습니다.
세트 z-index의 :before또는 :after유사 요소를 -1 그것을 제공 position하는 기리는 z-index특성 ( absolute, relative, 또는 fixed). 의사 요소 z-index는 <html>다른 요소의 기본값 인가 아닌 상위 요소에 상대적 이기 때문에 작동 합니다. 그것들은의 하위 요소이기 때문에 의미가 <html>있습니다.
내가 겪었던 문제 (위의 질문으로 받아 들여지고 위의 대답으로 이어짐)는 :after의사 요소를 사용하여 z-index15 의 요소에 대한 배경을 멋지게 만들고 z-index14의 세트로 설정하더라도 여전히 부모의 위에 렌더링되었습니다. 이는 해당 스택 컨텍스트에서 부모 z-index의 값이 0 이기 때문 입니다.
잘만되면 그것은 무슨 일이 일어나고 있는지 명확히하는 데 도움이됩니다.
누군가가 이것과 같은 문제를 겪을 지 모르겠습니다. 선택한 답변이 부분적으로 맞습니다.
필요한 것은 다음과 같습니다.
parent{
z-index: 1;
}
child{
position:relative;
backgr
나는 그것을 매우 간단하게 고쳤다.
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: -1;
}
이것은 z-index : 1에 부모를 쌓아 올리는 것인데, z-index : 0에 다른 돔 요소가 '존재하기'때문에 자식에게 z-index : 0에 '완료'할 방을줍니다. 부모 z- 인덱스 1의 자식은 다른 dom 요소 아래에있게되어 보이지 않습니다.
이것은 또한 다음 과 같은 의사 요소에서도 작동합니다 .
'IT' 카테고리의 다른 글
| 파이썬에서 파일의 줄을 검색하고 바꾸기 (0) | 2020.03.29 |
|---|---|
| ASP.NET MVC에서 현재 사용자를 얻는 방법 (0) | 2020.03.29 |
| 문자열에서 단어 바꾸기-Ruby (0) | 2020.03.29 |
| django에서 사용자 IP 주소를 어떻게 얻습니까? (0) | 2020.03.29 |
| 구문 오류 : 함수가 '£'를 반환 할 때 파일에 ASCII가 아닌 문자 '\ xa3' (0) | 2020.03.29 |