mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 12:48:10 +00:00
f42f300ba3
This momentarily handles the CSS property "position: absolute;" in combination with the properties "top" and "left", so that elements can be placed anywhere on the page independently from their parents. Statically positioned elements ignore absolute positioned elements when calculating their position as they don't take up space.
67 lines
1.5 KiB
HTML
67 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>absolute</title>
|
|
<style>
|
|
div {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.blue {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
top: 208px;
|
|
left: 208px;
|
|
}
|
|
.yellow {
|
|
background-color: yellow;
|
|
top: 50px;
|
|
left: 50px;
|
|
}
|
|
.red {
|
|
background-color: red;
|
|
top: 100px;
|
|
left: 100px;
|
|
}
|
|
.green {
|
|
background-color: green;
|
|
top: 300px;
|
|
left: 300px;
|
|
}
|
|
.black {
|
|
background-color: black;
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 50px;
|
|
left: 50px;
|
|
}
|
|
.blue_margin {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
margin-top: 200px;
|
|
margin-left: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="blue absolute">
|
|
<div class="red absolute"></div>
|
|
<div class="yellow absolute">
|
|
<div class="black absolute"></div>
|
|
</div>
|
|
<div class="green absolute"></div>
|
|
</div>
|
|
<div class="blue">
|
|
<div class="red"></div>
|
|
<div class="yellow"></div>
|
|
<div class="green"></div>
|
|
</div>
|
|
<div class="blue_margin"></div>
|
|
</body>
|
|
</html>
|