transform (rotate) 설정으로 Z-index가 취소됩니다.
transform 속성을 사용하면 z-index가 취소되고 전면에 나타납니다. (-webkit-transform을 주석 처리하면 Z-index가 아래 코드에서 제대로 작동합니다)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999;
/* Safari and Chrome */
-webkit-transform: rotate(3deg);
/* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>변환과 Z- 색인은 어떻게 함께 작동합니까?
무슨 일이 일어나고 있는지 살펴 보겠습니다. 시작하려면 z-index배치 된 요소 transform에서 자체적 으로 요소에 대한 새로운 " 스택 컨텍스트 "를 생성합니다. 무슨 일이 일어나고 있는지 :
귀하의 .test요소가있다 transform그것을 자신의 스택 컨텍스트를 제공 없음 이외로 설정.
그런 다음 .test:after의 자식 인 의사 요소 를 추가합니다 .test. 이 자식은 z-index: -1, Setting on .test:after 의 스택 컨텍스트 내.test 에서 스택 수준을 설정 하면 지정된 스택 컨텍스트 내에서만 의미가 있기 때문에 뒤에 배치되지 않습니다 .z-index: -1.test:after.testz-index
당신은 제거 할 때 -webkit-transform부터 .test그 원인의 스택 컨텍스트를 제거 .test하고 .test:after(의 스태킹 컨텍스트를 공유하는 <html>) 및 제조 .test:after이동의 뒤에를 .test. .test의 -webkit-transform규칙을 제거한 후 다시 한 번 새 z-index규칙 (모든 값)을 설정하여 고유 한 스택 컨텍스트를 제공 할 수 있습니다 .test(다시 배치 되었기 때문에)!
그렇다면 문제를 어떻게 해결합니까?
예상대로 작동 Z- 인덱스를 얻으려면 있는지 확인 .test하고 .test:after같은 스택 컨텍스트를 공유 할 수 있습니다. 문제는 .test변환을 사용하여 회전하고 싶지만 그렇게하려면 자체 스택 컨텍스트를 만드는 것을 의미합니다. 다행히도 .test래핑 컨테이너에 넣고 회전하면 자식이 스택 컨텍스트를 공유하는 동시에 둘 다 회전 할 수 있습니다.
다음은 당신이 시작한 것입니다 : http://jsfiddle.net/fH64Q/
스택 컨텍스트를 우회하고 회전을 유지할 수있는 방법은 다음과 같습니다 (
.test의 흰색 배경 때문에 그림자가 약간 잘립니다 ).
.wrapper {
-webkit-transform: rotate(10deg);
}
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
-webkit-transform: rotate(3deg); /* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}<div class="wrapper">
<div class="test">z-index is canceled.</div>
</div>There are other ways to do this, better ways even. I would probably make the "post-it" background the containing element and then put the text inside, that would probably be the easiest method and would reduce the complexity of what you have.
Check out this article for more details about z-index and stacking order, or the working W3C CSS3 spec on stacking context
Set the div you want to stay on top to position:relative
Quick fix: You could just rotate the other element by 0 degrees as well.
Had a similar problem where siblings were being transform: translate()'d and z-index wouldn't work.
Most straightforward solution is to set position: relative on all siblings, then z-index would work again.
I was facing the similar problem. What i did was, I added a wrapper div around the test and gave the transform property to the wrapper div.
.wrapper{
transform: rotate(10deg);
}
here is the fiddle http://jsfiddle.net/KmnF2/16/
참고URL : https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate
'Program Tip' 카테고리의 다른 글
| VirtualBox에서 우분투 게스트를 핑하는 방법 (0) | 2020.11.17 |
|---|---|
| 숫자 선택기 대화 상자를 만드는 방법은 무엇입니까? (0) | 2020.11.17 |
| Git 커밋 트리밍 / Git 기록 스 쿼싱 (0) | 2020.11.17 |
| 최소 비교 횟수로 배열에서 두 번째로 큰 요소 찾기 (0) | 2020.11.17 |
| 콘솔 응용 프로그램의 경우 "종료시" (0) | 2020.11.17 |