css3旋转后未保留z索引

我有这个密码

正文{左边距：10px；}
#顶部{背景：蓝色；宽度：30px；高度：30px；
位置：绝对；底部：0；z索引：2；}
按钮{页边距顶部：200px}
#背面{宽度：120px；高度：100px；背景：红色；位置：绝对}
#正面{宽度：100px；高度：100px；背景：绿色；
位置：绝对；页边距顶部：50px；z索引：0.8}
返回
前面
旋转
函数rotate（）
{
document.getElementById（“back”）.style.MozTransform=“旋转（10deg）”；
document.getElementById（“back”）.style.webkittTransform=“旋转（10deg）”；
document.getElementById（“back”）.style.msTransform=“旋转（10deg）”；
document.getElementById（“back”）.style.transform=“旋转（10deg）”；
返回false；
}

旋转后，z索引不会保留在#顶部元素上

请建议如何修复此问题

---

谢谢。

发生这种情况是因为转换函数创建了堆叠上下文：

由于堆叠上下文的原因，在转换之后，子div将永远被困在父zIndex中。

请参见

您必须在相同的堆叠上下文中创建三个div。您的代码可能会使蓝色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;}

---

您必须重新设计CSS，因为div现在是绝对的，并且处于相同的堆叠级别。请注意，

z-index

现在在转换后被保留。

这似乎是我读那篇文章时的重复问题。由于我是css3的新手，我无法修复代码。你能为我的问题提出一个解决方案吗。谢谢。你能在我的代码中建议如何解决这个问题吗？谢谢。我可以向后拖动、调整大小和旋转。所以，top也应该和back一起移动。因此，每次拖动、调整或旋转“back”时，我都必须更改“top”的位置。因此，如果没有其他解决方案，我将尝试实施您的解决方案。不管怎样，谢谢你的回复。谢谢。我会听从你的建议。

  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;}