如何在使用透視和變換時控制z-index？

Question

我讀過很多討論z-index的頁面，以及轉換和透視如何破壞他的上下文。我明白爲什麼我的代碼不工作，我不知道如何使它工作（或至少使用和替代）。

正如您在圖像上看到的，選擇菜單正在被下面的卡覆蓋。

下面是這個問題的再現一個片段：

.square { position: relative; width: 100%; padding-bottom: 100%; } 
 
.square>* { position: absolute; width: 100%; height: 100%; } 
 

 
/* flip */ 
 
/* u -> uncontroled/c -> controled */ 
 
.flip { perspective: 200em; } 
 
.flip .front, .flip .back { 
 
\t -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; 
 
\t backface-visibility: hidden; position: absolute; 
 
\t top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 
@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) { 
 
\t .flip .front, .flip .back { 
 
\t \t -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: 1s; 
 
\t } 
 
} 
 
/* -> horizontal */ 
 
.flip .front { z-index: 2; transform: rotateY(0deg); perspective: none;} 
 
.flip .back { transform: rotateY(-180deg); } 
 
.flip.u:hover .back, .flip.c.active .back { transform: rotateY(0deg); } 
 
.flip.u:hover .front, .flip.c.active .front { transform: rotateY(180deg); } 
 
/* -> vertical */ 
 
.flip.vertical .back { transform: rotateX(-180deg); } 
 
.flip.vertical.u:hover .back, .flip.vertical.c.active .back { transform: rotateX(0deg); } 
 
.flip.vertical.u:hover .front, .flip.vertical.c.active .front { transform: rotateX(180deg); } 
 

 
.test { 
 
\t position: absolute; top: 70%; left: 10%; background-color: green; 
 
\t height: 100px; width: 10px; z-index: 100; 
 
}

<div style="width: 100px; background-color: black"> 
 
    <div class="square flip u"> 
 
    <div class="front" style="background-color: blue"> 
 
     Front 
 
     <div class="test"></div> 
 
    </div> 
 
    <div class="back" style="background-color: red">Back</div> 
 
    </div> 
 
    <hr > 
 
    <div class="square flip u"> 
 
    <div class="front" style="background-color: blue">Front</div> 
 
    <div class="back" style="background-color: red">Back</div> 
 
    </div> 
 
</div>

我需要的是要顯示在所有前面的<div class="test">。像this。但我不想在方形div上設置z-index，因爲它們將放置在柔性佈局Grid中。

有沒有辦法對一個元素總是呈現在所有其他人面前？沒有mathers在哪裏放置或堆棧上下文中發生了什麼。

Answer 1

我所做的只是將div與類別.test移動div與翻轉元素。

.square { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-bottom: 100%; 
 
} 
 

 
.square>* { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 

 
/* flip */ 
 

 

 
/* u -> uncontroled/c -> controled */ 
 

 
.flip { 
 
    perspective: 200em; 
 
} 
 

 
.flip .front, 
 
.flip .back { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) { 
 
    .flip .front, 
 
    .flip .back { 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    transition: 1s; 
 
    } 
 
} 
 

 

 
/* -> horizontal */ 
 

 
.flip .front { 
 
    z-index: 2; 
 
    transform: rotateY(0deg); 
 
    perspective: none; 
 
} 
 

 
.flip .back { 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.flip.u:hover .back, 
 
.flip.c.active .back { 
 
    transform: rotateY(0deg); 
 
} 
 

 
.flip.u:hover .front, 
 
.flip.c.active .front { 
 
    transform: rotateY(180deg); 
 
} 
 

 

 
/* -> vertical */ 
 

 
.flip.vertical .back { 
 
    transform: rotateX(-180deg); 
 
} 
 

 
.flip.vertical.u:hover .back, 
 
.flip.vertical.c.active .back { 
 
    transform: rotateX(0deg); 
 
} 
 

 
.flip.vertical.u:hover .front, 
 
.flip.vertical.c.active .front { 
 
    transform: rotateX(180deg); 
 
} 
 

 
.test { 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 3%; 
 
    background-color: green; 
 
    height: 100px; 
 
    width: 10px; 
 
    z-index: 10; 
 
}

<div style="width: 100px; background-color: black"> 
 
    <div class="square flip u"> 
 
    <div class="front" style="background-color: blue"> 
 
     Front 
 

 
    </div> 
 
    <div class="back" style="background-color: red">Back</div> 
 
    </div> 
 
    <div class="test"></div> 
 
    <hr> 
 
    <div class="square flip u"> 
 
    <div class="front" style="background-color: blue">Front</div> 
 
    <div class="back" style="background-color: red">Back</div> 
 
    </div> 
 
</div>