如何使变形元素出现在定位元素上？

我有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股利。他们都创建堆叠上下文。然而，如果inner股利有自己的定位创建的堆叠上下文我可以控制其堆叠上下文z-index，但由于其堆叠上下文创建transform如何使它重叠wrapper股利？

来源

2014-09-13 AngularInDepth.com

正在从包装器样式选项中删除'z-index'？ – raina77ow 2014-09-13 19:57:26

那么，这是探讨问题:)。我首先在那里添加它来模拟一种情况。 – 2014-09-13 20:10:31

一种可能的方法是增加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造型 - 但我想这不是一个选项。

来源

2014-09-13 19:58:51 raina77ow

谢谢，添加定位的确是一种选择。我认为还有其他的东西，因为转化元素通常用于动画，而且他们应该高于其他元素。 – 2014-09-13 20:12:12

如何使变形元素出现在定位元素上？

回答

相关问题