Why `position: Sticky;` of an element stops working when it reaches the `margin-bottom` of the next element?

Asked

Viewed 20 times

0

I’m doing an exercise in CSS and I have a header stylized with position: sticky. This style works correctly until the scroll of the page finds the margin-bottom of the next element (div), when the header is no longer "Sticky". However, with margin-top in the div, the code works normally. The unforeseen is only with margin-bottom.
I did some research, but I couldn’t find an explanation for this behavior, or how to avoid it. I’d be grateful if someone could shed some light on the matter.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Desafio Menu</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        body {
            background-color: #333 ;
        }

        .cabecalho {
            position: sticky;
            top: 0px;
            width: 100%;
            height: 70px;
            background-color: black;
        }

        .logo img {
            float: left;
            padding: 10px 10px 10px 15px;
            height: 50px;
        }

        .logo {
            width: fit-content;
            height: fit-content;
        }

        ul {
            background-color: #000;
            white-space: nowrap;
            display: inline-block;
        }

        .menu li {
            display: inline-block;
        }

        .menu a {
            display: inline-block;
            margin-top: 15px;
            margin-right: 5px;
            padding: 10px 10px;
            background-color: #999;
            text-align: center;
            border-radius: 25px;
            color: #fff;
        }

        .menu a:hover {
            background-color: yellow;
            color: black;
        }

        .menu a:active {
            background-color: brown;
        }

        .menu a {
            text-decoration: none;
            color: inherit;
        }

        .menu-toggle {
            display: none;
            float: right;
        }

        .autenticacao {
            position: fixed;
            top: 0;
            height: 70px;
            right: 2.5%;
        }

        .autenticacao a {
            color: black;
            text-decoration: none;
            background-color: white;
            position: relative;
            top: 25px;
            margin: 5px;
            margin-top: 15px;
            margin-right: 5px;
            padding: 10px 10px;
            border-radius: 25px;
            box-shadow: 1px 1px 1px 1px white ;
            background-color: tomato;
        }

        .autenticacao a:active {
            color: #fff;
            box-shadow: none;
        }

        .logo a {
            font-size: 0px;
        }

        @media (max-width: 816px) {
            .cabecalho ul {
                display: none;
            }
        }
    </style>
</head>

<body>
    <header class="cabecalho">
        <div class="logo">
            <a href="#inicio">
                <img src="http://site/curso-web/logo.png" alt="Logo" />
            </a>
        </div>
        <button class="menu-toggle">
            <i class="fa fa-lg fa-bars"></i>
        </button>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#inicio">Início</a>
                </li>
                <li>
                    <a href="#cursos">Cursos</a>
                </li>
                <li>
                    <a href="#sobre">Sobre</a>
                </li>
                <li>
                    <a href="#contato">Contato</a>
                </li>
            </ul>
        </nav>
        <aside class="autenticacao">
            <a href="#login">Login</a>
            <a href="#registar" class="botao destaque">Registrar</a>
        </aside>
    </header>
    <div style="height: 2000px; margin-bottom: 1000px;"></div>
</body>

</html>

html css3 positioning margin

  • Use a padding bottom in the container you want to space, should solve the problem

1 answer

0

I was able to understand the behavior.

An element positioned as sticky remains so until the end of the box contents of the parent element. In this case, the parent element of header is body. So, header only remains "Sticky" while the browser is showing the content of body.

Then I realized that the margin-bottom of div which I inserted after headerdid not belong to the content of body. That’s why, header no longer remained at the top of the window after reaching the margin-bottom of div. Similarly, if an element is added before header, and he possesses a margin-top, header only "Sticky" below the height margin-top occupy.

Concludes, then, that styling the header with position: fixed; would better meet my needs.

Browser other questions tagged html css3 positioning margin

You are not signed in. Login or sign up in order to post.