[css] transform (rotate) 설정으로 z-index가 취소됩니다.

Program / 글쓴이

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>

스 니펫 확장

이를 수행하는 다른 방법, 더 나은 방법이 있습니다. 나는 아마도 “포스트잇”배경을 포함하는 요소로 만들고 텍스트를 안에 넣을 것입니다. 그것은 아마도 가장 쉬운 방법이고 당신이 가지고있는 것의 복잡성을 줄일 것입니다.

스택 순서 에 대한 자세한 내용 또는 스택 컨텍스트에 대한 W3C CSS3 사양에 대한 자세한 내용은 이 문서 를 확인하세요.z-index

답변

맨 위에 유지하려는 div를 설정하십시오. position:relative

답변

형제 자매가되는 한 비슷한 문제가 있었다 transform: translate()‘D 및 z-index작동하지 않을 것입니다.

가장 간단한 해결책은 position: relative모든 형제 를 설정 한 다음 z-index다시 작동하는 것입니다.

답변

빠른 수정 : 다른 요소도 0도 회전 할 수 있습니다.

답변

나는 비슷한 문제에 직면하고 있었다. 내가 한 것은 테스트 주변에 래퍼 div를 추가하고 래퍼 div에 transform 속성을 부여한 것입니다.

.wrapper{
    transform: rotate(10deg);
}

여기 바이올린입니다 http://jsfiddle.net/KmnF2/16/

답변

상단에 유지하려는 div를 위치로 설정하십시오.

답변