为什么在safari中位置粘性不起作用？
在Safari浏览器中，位置粘性（position: sticky）可能不起作用的原因有以下几个可能的因素：
- Safari版本问题：某些较旧的Safari版本可能不支持位置粘性属性。因此，首先确保你使用的是最新版本的Safari浏览器。
- 元素父级容器问题：位置粘性的元素必须有一个父级容器，并且该容器的高度不能为auto。如果父级容器的高度为auto，位置粘性可能无法正常工作。可以尝试为父级容器设置一个具体的高度值，或者使用min-height属性来确保父级容器具有足够的高度。
- 元素位置问题：位置粘性的元素必须在其父级容器内，并且不能被其他元素覆盖。如果元素的位置超出了父级容器的边界或被其他元素遮挡，位置粘性可能无法正常工作。可以检查元素的位置和父级容器的边界，确保它们没有发生重叠或溢出的情况。
- 元素z-index问题：如果位置粘性的元素被其他具有较高z-index值的元素覆盖，位置粘性可能无法正常工作。可以尝试为位置粘性的元素设置一个较高的z-index值，以确保它位于其他元素之上。
总结起来，要在Safari中使位置粘性生效，需要确保使用最新版本的Safari浏览器，元素必须有一个具有足够高度的父级容器，元素本身不能超出父级容器的边界，并且没有被其他元素覆盖。如果仍然无法解决问题，可以尝试使用其他CSS布局技术或JavaScript库来实现类似的效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云CDN：https://cloud.tencent.com/product/cdn
- 腾讯云安全产品：https://cloud.tencent.com/solution/security
- 腾讯云人工智能平台：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
- 腾讯云视频处理服务：https://cloud.tencent.com/product/vod
- 腾讯云音频处理服务：https://cloud.tencent.com/product/ame
- 腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
为什么在safari中位置粘性不起作用？
html、css、safari、position、sticky
在过去的五天里，我一直在挠头，但找不到解决方案，阅读了大量的文章，做了研究，但没有运气。第三个子元素的宽度可以大于父元素的宽度，因此我对right-side div应用了overflow: auto以进行水平滚动 我希望first-right-child和second-right-child是粘性的它在chrome和FF中的工作情况与预期一致。但不知何故它在safari中不起作用。
浏览 86提问于2021-10-07得票数 0
2回答
粘性页脚覆盖正文内容的底部
html、css、footer、overlap、sticky
我添加了一个粘性页脚，在Safari中不能覆盖正文内容时遇到了麻烦。Chrome和FF运行得很好，我在正文中添加了一个底边距来抵消粘性页脚的高度。为什么同样的功能在Safari中不起作用？这是有问题的页面...我不知道在这里粘贴代码的哪一部分，抱歉... http://go.datis.com/2019summit_agenda 我希望正文内容在它和粘性</em
浏览 33提问于2019-01-30得票数 1
回答已采纳
3回答
如何在Safari中生成粘性表行
css、safari、mobile-safari
标题应该坚持(在视图端口的顶部)，还有一些包含组标题的表行。为了简单起见，我在Codepen上创建了以下示例：td.sticky { color: white;}
在Chrome & Firefox上运行得很好。问题是它在Safari中不起作用(在Saf
浏览 5提问于2021-10-19得票数 5
回答已采纳
2回答
谷歌铬与位置粘稠的错误？
javascript、html、css、position、sticky
作为一个网站开发者，我真的很喜欢在chrome上开发。现在我注意到了一个定位错误: Google浏览器上的粘性。定位粘滞的元素行为不正确，这意味着:一切似乎都很好，除非您将一个粘性定位元素悬停，否则它不会对交互等作出反应。它的位置(相关元素)是粘稠的，但它的行为是错误的！
那个问题有什么解决办法吗？
浏览 3提问于2018-03-19得票数 3
回答已采纳
5回答
创建在iOS Safari上工作的“粘性”固定位置项
javascript、ios、onscroll
在iOS safari中，在用户停止平移之前，单指平移不会生成任何事件。仅当页面停止移动和重绘时才会生成onscroll事件。
我需要一种方法来检测实时滚动。具体地说，我想做一个在iOS safari上也能用的粘性菜单。在非移动浏览器上，粘滞菜单可以通过在收听onscroll事件时在元素上的“相对位置”到“固定位置”之间切换来完成。此方法在移动浏览器上不起作用，因
浏览 0提问于2011-11-13得票数 18
回答已采纳
2回答
CSS粘滞位置在移动设备上无法正常工作
html、css、opencart、opencart2.x、opencart2.3
我在我的OpenCart (2.3.0.2)网站上有一个带有粘性购物车按钮的按钮。我们的想法是，只有一个页面可供订购(只需要几个三明治，不需要分类和产品页面)，所以我在页面右上角添加了一个购物车按钮： position: fixed;}
正如你在右上角看到的，按钮向上滚动了一点。
浏览 4提问于2020-03-04得票数 1
1回答
初始化Magellan阈值+ Ruby on Rails
jquery、ruby-on-rails、zurb-foundation
如果我理解正确的话，将$(document).foundation(' Magellan '，{ threshold: 500 })放在我的html中的正确位置将导致麦哲伦(基础中的一个粘性导航栏)不会跳到从顶部向下滚动500像素的粘性位置。我不知道为什么它不工作。这就是我目前在页面底部的内容，就在正文tage之前。javascript_include_tag "application" %>
<sc
浏览 2提问于2013-09-14得票数 0
2回答
fontawesome链接在Safari的粘性页脚中不起作用
safari、sticky-footer、font-awesome
我的带有可爱图标的粘性页脚在所有浏览器中都能完美显示，但在Safari中，链接不起作用。a href="http://wordpress.com/"> </h4>谁能告诉我为什么这个在safa
浏览 2提问于2013-07-29得票数 1
1回答
嵌套固定位置
html、css
在这个固定的菜单中，我尝试创建一个仅在悬停时显示的购物车。为此，我使用了一个仅在光标悬停时显示的div。
你知道我如何在Safari上解决这个问题吗？
提前感谢您的帮助。
浏览 0提问于2017-09-24得票数 0
2回答
带角元件的Safari中的粘性位置
angular、safari、sticky
问题从Safari开始。
如果您构建了一个角度组件，其中包含一个position: sticky div作为模板中的第一个元素，那么Safari不知道如何处理它。如果您在物理上不使用<sticky-component>编写HTML，那么它在Safari中工作得很好。但是，由于粘性元素的父元素是宿主元素，所以这将失败。试图将粘性CSS添加到主机元素似乎也不起作用。以前有没有人遇到过这个问题，或者有什么解决办法？我知道我可以使用角度内的事件侦听
浏览 0提问于2018-11-30得票数 7
1回答
我有一个元素，其中position: sticky嵌套在一个元素中，元素中包含position: fixed，该元素覆盖在页面的可滚动主内容之上，如下所示：
为什么当我滚动到主要内容时，stickyd元素会滚动
浏览 0提问于2018-03-09得票数 0
1回答
修正了Firefox浏览器中粘性父元素闪烁的子元素
html、css、firefox
下面是实现：
问题是:当我在Chrome中打开这个Codepen时，一切都进行得很顺利，但是当我在Firefox中尝试这段代码时，却出现了奇怪的闪烁。你可以自己尝试，只需向下滚动和向上滚动。嵌套position: sticky;我可以在header__item上使用position: sticky而不是position: fixed;，但是这个解决方案在Safari浏览器中不起作用。我想要的是:去掉你可以在视频上看到
浏览 5提问于2020-09-11得票数 6
回答已采纳
2回答
如何将div粘性定位到移动页的末尾？
html、css
想要的结果:在Chrome和Safari iOS上，都是一个div，位于页面底部，不与可能占用超过100%可视视图的内容重叠。
浏览 7提问于2021-11-11得票数 0
1回答
tbody内垂直滚动的样式化HTML表格
php、html、css
今天，我试验了HTML表，并从MySQL数据库中填充它们。我的代码对于我所需的内容非常有效，表看起来如下所示：
我有一个主page=logs">Logs&l
浏览 1提问于2015-01-07得票数 3
2回答
Safari中的粘性标题可用，但不可见(添加了JavaScript类粘性)
javascript、css、browser、safari
我添加了一个粘性标题到我的网络商店，它在FF，Chrome，Edge上工作得很好。但它是隐形的！因为Safari是由苹果公司开发的，所以我知道这是一个功能，而不是一个bug --但当safari用户也能看到它的头文件时，它会非常有帮助！
你可以在这里查看： -有什么建议吗
浏览 0提问于2018-03-09得票数 0
1回答
如何创建包含以下内容的css列。可滚动的中间列和浮动的左右列
css、css-float
我正在创建一个网页，其中我需要一个内容列在页面的中心(包括固定宽度)和两个不可滚动(固定)列在该内容列的左侧和右侧(包括固定宽度)。左列需要与中间内容列的左侧对齐。右列需要与中间内容列的右侧对齐。如果内容栏有很多内容，中间的内容栏应该是可滚动的，在浏览器的右侧有一个滚动条。但是左边和右边的列不能滚动，而是固定在浏览器的顶部。在左列的左侧和右列的右侧，空白将以相同的宽度在两侧增加/减少。
我试图在</e
浏览 0提问于2011-03-26得票数 3
回答已采纳
1回答
为什么粘性位置在子div中不起作用
html、css
我在html页面中有多个div。当我试图粘贴菜单栏时，它不工作，菜单栏在其他div中。这是我的密码。
我在content中添加了虚拟数据，使其可以上下滚动。
浏览 0提问于2018-11-03得票数 1
回答已采纳
1回答
为父div设置溢出x的Sticky位置
html、css、position
我试图做一个粘性的标题与位置:粘性风格。 position: sticky; z-index: 1;在给出的示例中，您可以看到，第一个块粘滞不起作用(因为我设置了overflow因此，我的问题是如何使<em
浏览 6提问于2017-01-06得票数 5
回答已采纳
2回答
粘性位置不适用于safari移动设备
css、angular、navbar
css在我的桌面上的Chrome上运行得很好，但是当我试图在我的iPhone上查看它时，导航条就不再粘了。我试过把身体溢出的问题弄得一团糟，并在其他元素上应用粘滞的位置，但无法让它发挥作用。
浏览 2提问于2018-09-24得票数 1
1回答
Angular8滚动到底部不工作的Safari 12
scroll、safari、angular8
button').classList.add('sticky-bottom-margin'); } 我有一个粘性按钮在我的页面下面和“粘性-底部-边缘”类将有一个CSS底部边距值，以便当到达底部页，页脚将不会被覆盖或隐藏。然而，当我在Ipad Mini 2019 safari 12上尝试这一点时，它不起作用。请给我建议。谢谢
浏览 1提问于2020-07-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
