blob: a0d2f638e26c87f59377b7b674b234904e41127a [file] [log] [blame]
<!DOCTYPE html>
<!--
| "overflow" property affects the clipping of all of the element's content
| except any descendant elements whose containing block is the viewport or
| an ancestor of the element.
| https://www.w3.org/TR/CSS21/visufx.html#overflow
-->
<html>
<head>
<style>
.outer-common {
background-color: rgba(63, 81, 181, 0.5);
width: 100px;
height: 100px;
}
.outer-1 {
overflow: hidden;
margin-bottom: 30px;
}
.outer-2 {
position: absolute;
overflow: hidden;
}
.outer-3 {
position: absolute;
left: 140px;
top: 0px;
}
.outer-4 {
position: absolute;
overflow: hidden;
left: 140px;
}
.inner-common {
position: absolute;
z-index: -1;
width: 50px;
height: 50px;
}
.inner-1 {
background-color: #7BAAF7;
left: 25px;
top: 25px;
}
.inner-2-container {
position: absolute;
overflow: hidden;
width: 25px;
height: 50px;
left: 25px;
top: 75px;
}
.inner-2 {
background-color: #3367D6;
}
.inner-3 {
background-color: #57BB8A;
left: 75px;
top: 25px;
}
.inner-4 {
background-color: #0B8043;
left: 75px;
top: 75px;
}
</style>
</head>
<body>
<div class="outer-common outer-1">
<div class="inner-common inner-1"></div>
<div class="inner-2-container">
<div class="inner-common inner-2"></div>
</div>
<div class="inner-common inner-3"></div>
<div class="inner-common inner-4"></div>
</div>
<div class="outer-common outer-2">
<div class="inner-common inner-1"></div>
<div class="inner-2-container">
<div class="inner-common inner-2"></div>
</div>
<div class="inner-common inner-3"></div>
<div class="inner-common inner-4"></div>
</div>
<div class="outer-common outer-3">
<div class="inner-common inner-1"></div>
<div class="inner-2-container">
<div class="inner-common inner-2"></div>
</div>
<div class="inner-common inner-3"></div>
<div class="inner-common inner-4"></div>
</div>
<div class="outer-common outer-4">
<div class="inner-common inner-1"></div>
<div class="inner-2-container">
<div class="inner-common inner-2"></div>
</div>
<div class="inner-common inner-3"></div>
<div class="inner-common inner-4"></div>
</div>
</body>
</html>