如何使變形元素出現在定位元素上？

我有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

如何使變形元素出現在定位元素上？

回答

相關問題