mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 12:27:35 +00:00
LibWeb: Some improvements to absolute positioning
Absolutely positioned blocks now register themselves with their containing block (and note that the containing block of an absolutely positioned box is the nearest non-statically positioned block ancestor or the ICB as fallback.) Containing blocks then drive the layout of their tracked absolutely positioned descendants as a separate layout pass. This is very far from perfect but the general direction seems good.
This commit is contained in:
parent
ff2c949d70
commit
260427f0ad
8 changed files with 166 additions and 24 deletions
48
Base/home/anon/www/position-absolute-from-edges.html
Normal file
48
Base/home/anon/www/position-absolute-from-edges.html
Normal file
|
@ -0,0 +1,48 @@
|
|||
<style>
|
||||
#container {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid gray;
|
||||
}
|
||||
#green {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
}
|
||||
#blue {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#yellow {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background: yellow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=red></div>
|
||||
<div id=green></div>
|
||||
<div id=blue></div>
|
||||
<div id=yellow></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue