Piè di pagina appiccicoso

I piè di pagina persistenti sono un modo diffuso per mostrare gli avvisi. Le notifiche inserite nel piè di pagina hanno meno probabilità di oscurare gli elementi della pagina, ad esempio le barre di navigazione, il branding e gli annunci banner. Inoltre, i piè di pagina fissi non causano variazioni del layout quando vengono inseriti nella pagina.

<div id="banner" class="banner">
    <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
    <div>
        <h1>Notice</h1>
        Lorem ipsum dolor sit amet.
    </div>
</div>

        body {
    font-family: system-ui;
    padding: 2em;
    overscroll-behavior-y: none;
    background-color: #f4f4f4;
}
.banner {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.close-button {
    background: transparent;
    border: none;
    padding: 1em;
    font-size: 1em;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
        

        document.getElementById("close-button").onclick = () => {
    document.getElementById("banner").style.display = "none";
}