mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 21:37:35 +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:
parent
494df52961
commit
f42f300ba3
7 changed files with 137 additions and 10 deletions
67
Base/home/anon/www/position-absolute-top-left.html
Normal file
67
Base/home/anon/www/position-absolute-top-left.html
Normal 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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue