blob: d6e4959f5a8cf207d06f01152d8c27a7a9c92081 [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(255, 100, 0);
.inner-absolute-block {
position: absolute;
width: 50px;
height: 50px;
left: 100px;
top: 100px;
background-color: rgb(0, 100, 255);
<div class="outer-absolute-block">
<div class="static-block"></div>
<div class="inner-absolute-block"></div>