Pied de page persistant

Les pieds de page fixes sont un moyen populaire d'afficher des notifications. Les avis placés en pied de page sont moins susceptibles de masquer les éléments de la page tels que les barres de navigation, le branding et les bannières. De plus, les pieds de page persistants n'entraînent pas de décalages de mise en page lorsqu'ils sont insérés dans la page.

<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";
}