כותרת תחתונה במיקום קבוע

כותרות תחתונות דביקות הן דרך פופולרית להצגת הודעות. יש פחות סיכוי שהודעות שממוקמות בכותרת התחתונה יסתירו אלמנטים בדף, כמו סרגלי ניווט, מיתוג ומודעות באנר. בנוסף, כותרות תחתונות במיקום קבוע לא גורמות לשינויי פריסה כשהן נוספות לדף.

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