Question

我有this setup：

   <style>
      .wrapper {
        position: relative;
        z-index:1;
        width: 100px;
        background: yellow;
        min-height: 70px;
      }

      .inner {
        background: blue;
        width: 100px;
        min-height: 70px;
        top: 0;
        bottom: 0;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>

  <body>
    <div class="wrapper"></div>
    <div class="inner"></div>  
  </body>

wrapper div与inner div重叠。它们都创建堆叠上下文。然而，如果inner div具有通过定位创建的自己的堆叠上下文，我可以使用z-index控制其堆叠上下文，但由于其堆叠上下文由transform创建，我如何使其重叠wrapper div？

Answer 1

一种可能的方法是将z-index（值相同或大于.wrapper元素）和position:relative添加到.inner元素样式：

.wrapper {
    position: relative;
    z-index: 1;
    /* ... */
}

.inner {
    position: relative;
    z-index: 1;
    transform: translate(-50%, -50%);
    /* ... */
}

Demo另一种（相当明显的）方法是从z-index: 1样式中删除.wrapper定义 - 但我想这不是一种选择。

如何使变换后的元素出现在定位元素上？

1 个答案: