Z-Index Is Canceled by Setting Transform(Rotate)

z-index is canceled by setting transform(rotate)

Let's walk through what is occurring. To start, note that z-index on positioned elements and transform by itself create new "stacking contexts" on elements. Here's what's going on:

Your .test element has transform set to something other than none, which gives it its own stacking context.

You then add a .test:after pseudo-element, which is a child of .test. This child has z-index: -1, setting the stack level of .test:after within the stacking context of .test Setting z-index: -1 on .test:after does not place it behind .test because z-index only has meaning within a given stacking context.

When you remove -webkit-transform from .test it removes its stacking context, causing .test and .test:after to share a stacking context (that of <html>) and making .test:after go behind .test. Note that after removing .test's -webkit-transform rule you can, once again, give it its own stacking context by setting a new z-index rule (any value) on .test (again, because it is positioned)!

So how do we solve your problem?

To get z-index working the way you expect, make sure that .test and .test:after share the same stacking context. The problem is that you want .test rotated with transform, but to do so means creating its own stacking context. Fortunately, placing .test in a wrapping container and rotating that will still allow its children to share a stacking context while also rotating both.

Here's what you started with: http://jsfiddle.net/fH64Q/
And here's a way you can get around the stacking-contexts and keep
the rotation (note that the shadow gets a bit cut off because of .test's white background):

.wrapper {    -webkit-transform: rotate(10deg);}.test {       width: 150px;       height: 40px;       margin: 30px;       line-height: 40px;       position: relative;       background: white;}.test:after {       width: 100px;       height: 35px;       content: "";       position: absolute;       top: 0;       right: 2px;       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */       -webkit-transform: rotate(3deg); /* Safari and Chrome */       transform: rotate(3deg);       z-index: -1;}

<div class="wrapper">    <div class="test">z-index is canceled.</div></div>

Is there a clear way of setting the context of a Z-index inside nested transformations

Try setting a -1 index to the background image.

This is a very good article for z-index too What the heck, z-index??

Why is z-index affected by transform?

This is because the specification describes that a transform different than the value none should create a new stacking context.

On MDN:

If the property has a value different than none, a stacking context
will be created. In that case the object will act as a containing
block for position: fixed elements that it contains.

transform:rotate() forces video on top of all elements

The given snippet worked as expected/required on FireFox on Window10. It worked to an extent on Edge on W10 in that the text appeared on top of the video, but the video was confined to full height (300px) and corresponding (auto) width - not seeming to take any notice of cover. On IOS13 Safari and on Chrome the video turned and took up the full width and height without distortion (ie cover seemed to work) but the text was hidden. It was this last phenomenon that was reported in the question.

As it is Chrome that is of interest a method which worked for that was sought and is given here. It requires two lots of an outer div with class tas-fullscreen. The first contains the video and the div is given z-index -1 (z-index 0 or above did not work). The second contains the text and is given a higher z-index.

<!DOCTYPE html>
<html>
<head>
<style>
.tas-fullscreen{
    position: absolute;
    left: 0px;
    top:600px;
    overflow: hidden;
    height: 300px;
    width: 600px;
    font-size: 46px;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    display: flex;
}

.media-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.media-content{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

video{
  positon: absolute;
  object-fit: cover;
  height: 100%;
  width:100%;
}
</style>
</head>
<body>
<div class="tas-fullscreen" style="z-index:-1;">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
</div>
</div>
<div class="tas-fullscreen" style="z-index:100;background-cyan:opacity:0.5;">
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</body>
</html>

Z-Index Is Canceled by Setting Transform(Rotate)