DEV Community

Max Core
Max Core

Posted on

How to solve header `position: sticky; left: 0` not working

#css #html

One need just that one line:

html, body {overflow-x:auto;height:100%;}
Enter fullscreen mode Exit fullscreen mode

Full example:

<html>
<head>
    <style>
        * {margin:0;padding:0;}
        html, body {overflow-x:auto;height:100%;}
        .header {position:sticky;top:0;left:0;background:#ddd;}
    </style>
</head>
<body>
    <div class="header">
        Logo
    </div>
    <div style="width:5000px;height:5000px;">
        Hello, World! Hello, World! Hello, World!<br>
        Hello, World! Hello, World! Hello, World!<br>
        Hello, World! Hello, World! Hello, World!<br>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Thanks for the attention

Top comments (0)