mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 05:17:34 +00:00
LibWeb: Do not compensate padding for abspos boxes with static position
When a box does not have a top, left, bottom, or right, there is no need to adjust the offset for positioning relative to the padding edge, because the box remains in the normal flow.
This commit is contained in:
parent
2c1bbf5a99
commit
4164af2ca4
9 changed files with 128 additions and 1 deletions
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
padding: 10px 50px 100px 20px;
|
||||
background-color: mediumseagreen;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width : 100px;
|
||||
height: 100px;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style><div class="box"><div class="inner"></div></div>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
padding: 10px 50px 100px 20px;
|
||||
background-color: mediumseagreen;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
width : 100px;
|
||||
height: 100px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style><div class="box"><div class="inner"></div></div>
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.box {
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #FDDE5C 0%, #F8AB5E 16.66667%, #F56A62 33.33333%, #A176C8 50%, #759BEB 66.66667%, #65BEB3 83.33333%, #70DB96);
|
||||
}
|
||||
</style><div class="box"><div class="inner"></div></div>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
padding: 10px 50px 100px 20px;
|
||||
background-color: mediumseagreen;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
width : 100px;
|
||||
height: 100px;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style><div class="box"><div class="inner"></div></div>
|
Loading…
Add table
Add a link
Reference in a new issue