mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 13:48:12 +00:00

Since grid item's containing block is not grid container but corresponding grid area, it affect positioning of abspos items.
23 lines
No EOL
404 B
HTML
23 lines
No EOL
404 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;
|
|
}
|
|
|
|
.abspos-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
grid-area: b;
|
|
}
|
|
</style><div class="grid"><div class="abspos-item"></div></div> |