1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 23:47:45 +00:00

LibWeb: CSS: Add "position: absolute" with top and left

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.
This commit is contained in:
myphs 2020-03-23 17:29:15 +01:00 committed by Andreas Kling
parent 494df52961
commit f42f300ba3
7 changed files with 137 additions and 10 deletions

View file

@ -0,0 +1,67 @@
<!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>

View file

@ -23,6 +23,7 @@ h1 {
<p>This is a very simple browser built on the LibWeb engine.</p>
<p>Some small test pages:</p>
<ul>
<li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
<li><a href="demo.html">fun demo</a></li>
<li><a href="raf.html">requestAnimationFrame test</a></li>
<li><a href="canvas.html">canvas 2D test</a></li>