CSS Translate ignores z-index

Asked Oct 21 '19 at 09:56

Active Oct 21 '19 at 10:06

Viewed 42 times

I'm trying to animate a div into three others where 2 divs are overlapping the animated div.

* {
  position:relative;
}

#left {
   background-color: red;
   width: 100px;
   height: 40px;
   z-index: 2;
 }
    
#right1 {
   background-color: green;
   width: 100px;   
   height: 20px;
   z-index: 5;
   
 }
 
 #right2 {
   background-color: blue;
   width: 100px;
   height: 20px;
   z-index: 1;
 }
 
  #right3 {
   background-color: yellow;
   width: 100px;
   height: 20px;
   z-index: 5;
 } 
 
 #groupe{
   display:flex;
   flex-direction:column;
   transform:translateX(-30px);
   
 }

<div style="display:flex;flex-direction:row;align-items:center;">
    <div id="left">      
    </div>
    <div id="groupe">        
        <div id="right1"></div>
        <div id="right2"></div>
        <div id="right3"></div>
    </div>
</div>

The "groupe"- ID should fit into the others like this:

Solutions I've tried: Set divs to position relative and animate margin-left is not a opportunity

edited Oct 21 '19 at 09:59

cloned

6,346
4
26
38

asked Oct 21 '19 at 09:56

Thomas Z.

what you want is impossible because translate will create a stacking context so all of them will behave the same, you cannot seperate them. You need something else that doesn't create a staking context like you noticed with margin – Temani Afif Oct 21 '19 at 10:03
1

or translate each element alone – Temani Afif Oct 21 '19 at 10:04
this wont work if you wrap your divs in "groupe". you need to do it seperate – bill.gates Oct 21 '19 at 10:05
#groupe div { transform:translateX(-30px); } worked for me thanks! – Thomas Z. Oct 21 '19 at 10:05

CSS Translate ignores z-index

0 Answers0