blob: 6ee4c42163fa73f6e31fbe1ac99769e376985724 [file] [log] [blame]
<!DOCTYPE html>
| Absolutely positioned elements are positioned relative to their containing
| block when specifying left and top. Their containing block is their first
| ancestor with a position that is set to 'relative', 'absolute' or 'fixed'.
body {
margin: 0;
.outer-absolute-block {
position: absolute;
.static-block {
position: static;
width: 100px;
height: 100px;
background-color: rgb(0, 255, 100);
.inner-absolute-block {
position: absolute;
width: 50px;
height: 50px;
left: -100px;
top: 100px;
background-color: rgb(0, 100, 255);
<body dir="rtl">
<div class="outer-absolute-block">
<div class="static-block"></div>
<div class="inner-absolute-block"></div>