blob: a52c5c72d089129a488226f4d785d0a2f66c3685 [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the element has "position: absolute", the containing block is established
| by the padding edge of the nearest ancestor with a "position" of "absolute".
| http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
-->
<html>
<head>
<style>
.containing-block-with-padding {
position: absolute;
width: 150px;
height: 150px;
padding-top: 50px;
padding-left: 50px;
background-color: rgb(100, 100, 255);
}
.stacking-context {
position: static;
opacity: .9;
}
.absolute-element {
position: absolute;
width: 100px;
height: 100px;
background-color: rgb(255, 100, 100);
}
</style>
</head>
<body>
<div class="containing-block-with-padding">
<div class="stacking-context">
<div class="absolute-element"></div>
</div>
</div>
</body>
</html>