Chân trang cố định

Chân trang cố định là một cách phổ biến để hiển thị thông báo. Thông báo đặt ở chân trang ít có khả năng che khuất các thành phần của trang như thanh điều hướng, thương hiệu và quảng cáo biểu ngữ. Ngoài ra, chân trang cố định không làm thay đổi bố cục khi được chèn vào trang.

HTML

<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>

CSS


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

JS


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