blob: e05b8a4c59d203db2ebade262d6cbf74a58f2128 [file] [log] [blame]
<!DOCTYPE html>
| A stacking context and a containing block may be different boxes,
| so the parent stacking context should offset the child stacking context
| by the sum of all offsets of containing blocks between it and the child.
.absolutely-positioned {
position: absolute;
.level-1 {
background-color: #b3e5fc;
padding: 10px;
.level-2 {
background-color: #40c4ff;
padding: 20px;
.level-3 {
background-color: #00b0ff;
padding: 40px;
.level-4 {
background-color: #0091ea;
height: 100px;
width: 100px;
.absolutely-positioned.level-4 {
background-color: #01579b;
.with-z-index {
z-index: -1;
<div class="absolutely-positioned level-1 with-z-index">
<div class="level-2">
<div class="absolutely-positioned level-3">
<div class="level-4"></div>
<div class="absolutely-positioned level-4 with-z-index"></div>