Fixierte Fußzeile

Fixierte Fußzeilen sind eine beliebte Methode, um Mitteilungen anzuzeigen. In der Fußzeile platzierte Hinweise verdecken Seitenelemente wie Navigationsleisten, Branding und Banneranzeigen seltener. Außerdem verursachen fixierte Fußzeilen keine Layoutverschiebungen, wenn sie in die Seite eingefügt werden.

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