10f516d354
Implements CSS position: sticky across the full rendering pipeline: style parsing, layout constraint capture, and scroll-dependent offset resolution at display-list build time. Sticky elements participate in normal flow during layout; visual offset is computed per-frame based on scroll position and containing block bounds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
19 lines
662 B
HTML
19 lines
662 B
HTML
<html>
|
|
<head>
|
|
<style>
|
|
:root{--bs-blue:#0d6efd;--bs-body-color:#212529}
|
|
*,::after,::before{box-sizing:border-box}
|
|
body{margin:0;font-family:system-ui;color:var(--bs-body-color)}
|
|
.container{width:100%;max-width:960px;margin:0 auto}
|
|
.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}
|
|
.navbar{display:flex;align-items:center;padding:.5rem 1rem}
|
|
/* Higher-specificity rule overrides with sticky. */
|
|
.navbar.fixed-top{position:-webkit-sticky;position:sticky}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar fixed-top" style="height:50px;background:lightblue;">Fixed Navbar</nav>
|
|
<div class="container" style="margin-top:60px;">Content below</div>
|
|
</body>
|
|
</html>
|