blob: 57de3aca25bb68d22375fb1692c5c14543fccb92 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Any computed value other than "none" for the "transform" results in
| the creation of a stacking context.
| https://www.w3.org/TR/css3-transforms/#transform-property
-->
<html>
<head>
<style>
.block {
height: 100px;
left: 20px;
position: absolute;
top: 20px;
width: 100px;
}
.transformed {
transform: translateY(150px) rotate(15deg);
}
.outer {
background-color: #0091ea;
}
.inner {
background-color: #00b0ff;
z-index: -1;
}
</style>
</head>
<body>
<div class="outer block">
<div class="inner block"></div>
</div>
<div class="transformed outer block">
<div class="inner block"></div>
</div>
</body>
</html>