mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-15 05:22:04 +00:00
da5d4e9f6a
Before this change we were ignoring boxes with `display: inline` while assigning sticky insets. This was not correct because inline boxes are allowed to have sticky positioning. Fixes: https://github.com/LadybirdBrowser/ladybird/issues/3718 https://github.com/LadybirdBrowser/ladybird/issues/3507 https://github.com/LadybirdBrowser/ladybird/issues/3133
50 lines
2.1 KiB
HTML
50 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<style>
|
|
.container {
|
|
width: 80%;
|
|
margin: auto;
|
|
}
|
|
|
|
.sticky-inline {
|
|
display: inline;
|
|
position: sticky;
|
|
top: 10px;
|
|
background: yellow;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<p>
|
|
This is an example of an inline box with <span class="sticky-inline">position: sticky</span>.
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod, nulla id consequat facilisis,
|
|
libero risus placerat lacus, sed fermentum nisl nunc non sapien. Vivamus scelerisque feugiat dui, ac
|
|
venenatis ligula ultricies vel. Duis id nunc in felis feugiat cursus. Pellentesque habitant morbi tristique
|
|
senectus et netus et malesuada fames ac turpis egestas.
|
|
Curabitur at felis ac massa aliquet dictum. Ut auctor ligula non ante interdum, a euismod dui tristique. Nam
|
|
consequat, massa ut ultrices fermentum, lacus libero vulputate nulla, sit amet vehicula erat odio a metus.
|
|
Nulla vitae lectus sed erat scelerisque sodales.
|
|
</p>
|
|
<p>
|
|
This is an example of an inline box with <span class="sticky-inline">position: sticky</span>.
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod, nulla id consequat facilisis,
|
|
libero risus placerat lacus, sed fermentum nisl nunc non sapien. Vivamus scelerisque feugiat dui, ac
|
|
venenatis ligula ultricies vel. Duis id nunc in felis feugiat cursus. Pellentesque habitant morbi tristique
|
|
senectus et netus et malesuada fames ac turpis egestas.
|
|
Curabitur at felis ac massa aliquet dictum. Ut auctor ligula non ante interdum, a euismod dui tristique. Nam
|
|
consequat, massa ut ultrices fermentum, lacus libero vulputate nulla, sit amet vehicula erat odio a metus.
|
|
Nulla vitae lectus sed erat scelerisque sodales.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|