Css 粘性位置将每个内容向下推答案

【问题标题】：Css sticky position pushes every content downCss 粘性位置将每个内容向下推
【发布时间】：2020-08-01 09:04:45
【问题描述】：

我正在处理一个网站项目，该项目涉及索引页面上的全屏 Google 地图元素。我正在尝试在右侧添加徽标并使其具有粘性，因此当用户向下滚动时，它会保持原位。

但是，一旦我将 logo 元素的容器设置为sticky，并且内部的logo 显示为块，虽然它可以工作，但它也在页面顶部创建了一条白线，向下推了 Google Maps 元素

这是关于该问题的图片，其中元素被按下：

HTML 如下所示：

    <body style="position: relative;">
    <div class="titleText" style="position: relative;">
    <div id="smallh">Country,</div>
    <div class="title">XYZ</div>
    <div class="h">Soon</div>
    </div>
    <div class="sticky"><div style="border: 1px solid aquamarine"><img src="logo.png"></div></div>
    <div id="map"></div>
    

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap&region=hu">
        </script>
</html>
</body>

CSS 如下所示：

    div.sticky{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        width: 60px;
        float: right;
        font-size: 20px;
        z-index: 999;
    }

img {
    width: 60px;
    height: 60px;
    display: block;
    
}

显然我在这里遗漏了一些简单的东西

【问题讨论】：

尝试删除float:right;，将right: 0; 添加到div.sticky 并将sticky 更改为fixed。
@OlivierKrull 它有效！您能否深入解释一下，为什么固定有效？
见here

标签： html css

【解决方案1】：

div.sticky {
  position: -webkit-fixed;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px;
  width: 60px;
  font-size: 20px;
  z-index: 999;
}

【讨论】：

【解决方案2】：

我有类似的问题。 Sticky 不应被视为固定在屏幕上的“粘性”，就是这样。

Olivier 的参考是正确的 - 最新的浏览器首先将其作为相对块处理（它确实推送以下内容），然后固定顶部，只有在到达容器末尾时，它才会切换到绝对底部（在某种意义上） .

遗憾的是，这对我来说意味着我可能需要使用 JQuery，因为我需要一个绝对/固定/绝对组合。

【讨论】：