时间戳

首页 > 解决方案 > 粘性 div 永久保留在顶角

html - 粘性 div 永久保留在顶角

问题描述

我有一个“立即预订”按钮，它以 10 像素的间距贴在视口的顶部。父元素的高度为 100%，这意味着滚动超过 100% 的高度会使“Book Now”div 滚动到视图之外。见这里。

如何使父元素占整个网页高度的 100%，因此“立即预订”div 始终位于顶部？

HTML：

<div class="book font">
        <a href="index.html">BOOK NOW</a>
</div>

CSS：

.book {
position: absolute;
height: 100%;
z-index: 100;
margin-top: 80px;
margin-right: 10px;
right: 0;
top: 0;
}

.book a {
    position: sticky;
    top: 10px;
    text-decoration: none;
    color: #1e1e1e;
    border: 4px solid #cfac44;
    background: #cfac44;
    padding: 10px 15px;
    transition: .2s;
    -webkit-transition: .2s;
}

标签： htmlcss

解决方案

您的问题可以在没有 position: fixed保留的情况下解决position: sticky。

添加样式position: relative：body

body {
    ...
    position: relative;
}

并添加bottom: 0选择.book器。这会将其拉伸到标签div的最底部：body

.book {
    ...
    bottom: 0;
}

推荐阅读