CSS3旋转后z-index不保留

Question

CSS3旋转后z-index不保留

7

  <style>
  body {margin-left:10px;}
  #top {background:blue;width:30px;height:30px; 
    position:absolute; bottom:0; z-index:2;}
  button {margin-top:200px}
  #back {width:120px;height:100px;background:red; position:absolute}
  #front {width:100px;height:100px;background:green; 
    position:absolute; margin-top:50px; z-index:0.8}
  </style>


  <div id="back"><div id="top"></div> back</div>
  <div id="front">front</div>
  <button onclick="rotate()">rotate</button>


  <script>
  function rotate()
  {
  document.getElementById("back").style.MozTransform = "rotate(10deg)";
  document.getElementById("back").style.WebkitTransform = "rotate(10deg)";
  document.getElementById("back").style.msTransform = "rotate(10deg)";
  document.getElementById("back").style.transform="rotate(10deg)";
  return false;
  }
  </script>

旋转后，#top元素的z-index未保留。

请建议如何修复此问题。

谢谢。

- Arnold

2

这似乎是一个重复的问题，与https://dev59.com/WWw05IYBdhLWcg3w6F8w相同。 - user2620028

我看了那篇帖子。由于我是CSS3的新手，无法修复这段代码。你能否给我提供一个解决方案？谢谢。 - Arnold

2个回答

0

这是因为 transform 函数创建了一个堆叠上下文：

由于堆叠上下文，变换后子div将永远被困在父元素的zIndex之内。

- Luizgrs

请问您能否建议我如何解决代码中的问题吗？谢谢。 - Arnold

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niloct · Accepted Answer

请查看http://jsfiddle.net/uR5MS/1/

您需要确保三个div在同一堆叠上下文中。令人意外的是，您的代码可以使蓝色div位于所有其他元素之上，因为它嵌套在较高的div中。

  body {margin-left:10px;}
  #top {background:blue;width:30px;height:30px;position:absolute;bottom:0;z-index:3;top:70px;}
  button {margin-top:200px}
  #back {width:100px;height:100px;background:red;position:absolute; z-index:1}
  #front {width:100px;height:100px;background:green;position:absolute;top:50px; z-index:2;}

由于div现在是绝对定位并处于相同的堆栈级别，您将需要重新设计CSS。请注意，在转换后，z-index现在被保留。