blob: 2deadb6c8179b6b7dafc8acfebcf96e28f9c18c8 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Within each stacking context, the following layers are painted
| in back-to-front order:
| - the background and borders of the element forming the stacking context.
| - the child stacking contexts with negative stack levels (most negative
| first).
|
| https://www.w3.org/TR/CSS21/visuren.html#z-index
-->
<html>
<head>
<style>
.outer {
border: 5px solid #00b0ff;
background-color: #0091ea;
height: 100px;
position: absolute;
width: 100px;
z-index: 0;
}
.inner {
border: 5px solid #00e676;
background-color: #00c853;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
z-index: -1;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>