mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-24 18:02:20 +00:00
19afc5b11b
Containing block for abspos grid items depends on their grid placement: - if element has definite grid position, then corresponding grid area should be used as a containing block - if element does not have definite grid position, then padding edge of grid container should be used as a containing block So offset should be adjusted for paddings only for boxes without definite grid position.
32 lines
No EOL
633 B
HTML
32 lines
No EOL
633 B
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 100px 100px;
|
|
grid-template-areas: "a b";
|
|
position: relative;
|
|
width: 200px;
|
|
height: 100px;
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.abspos-item-with-grid-area {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
grid-area: a;
|
|
}
|
|
|
|
.abspos-item-with-auto-placement {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style><div class="grid"><div class="abspos-item-with-grid-area">A</div><div class="abspos-item-with-auto-placement">B</div></div> |