开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用position:sticky时图像不会留在原地

position:sticky是CSS中的一个定位属性，它可以使元素在滚动过程中保持在特定位置，直到滚动到达指定的阈值时才开始滚动。

当使用position:sticky时，图像不会留在原地的原因可能是由于以下几个因素：

缺少必要的CSS属性：position:sticky需要配合top、bottom、left或right属性来指定元素的粘性位置。如果没有正确设置这些属性，元素可能无法正确粘附在指定位置。
父元素高度不足：如果父元素的高度不足以容纳sticky元素，那么元素可能会在滚动时跟随滚动而消失。确保父元素具有足够的高度以容纳sticky元素。
兼容性问题：position:sticky在一些旧版本的浏览器中可能不被支持或存在兼容性问题。在使用时，建议检查浏览器兼容性并提供备用方案。

为了解决这个问题，可以尝试以下方法：

确保正确设置CSS属性：使用position:sticky时，确保为元素设置了正确的top、bottom、left或right属性，以指定元素的粘性位置。
检查父元素高度：确保父元素具有足够的高度以容纳sticky元素。可以通过设置父元素的高度或使用CSS布局技术（如flexbox或grid）来实现。
检查浏览器兼容性：在使用position:sticky时，检查目标浏览器的兼容性，并提供备用方案或使用polyfill来解决兼容性问题。

总结起来，position:sticky是一种CSS定位属性，用于使元素在滚动过程中保持在特定位置。如果图像不会留在原地，可能是由于缺少必要的CSS属性、父元素高度不足或浏览器兼容性问题。确保正确设置CSS属性、检查父元素高度并检查浏览器兼容性可以解决这个问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:overflow:使用position:sticky时，自动无法正常工作通过.innerHTML添加元素时，无法使用position:sticky；当我使用position: sticky时，我的导航栏不能滚动 Javascript:使用函数时图像不会改变图像不会停留在适当的位置(电子邮件营销，使用<td>)图像不会保留在带有绝对位置的div中(使用css网格)使用loop时，图像不会显示在烧瓶上使用Powershell时，Imagebox不会在需要时翻转图像页脚上的图像不会停留在页脚上，而是在向上/向下滚动时移动使用状态挂钩时，UI中的图像不会更新使用vanilla javascript时，图像不会基于更改而移动使用addthis在facebook上共享页面时，不会显示图像使用background: url()时，图像不会在reactjs中显示在使用flexbox时，如何让图像停留在特定的一行上？使用elcimagepickercontroller时，图像不会出现在相机卷中如果不使用打包程序，离线加载时图像不会出现使用THREE.js和Panolens.js时图像不会出现使用Python发送电子邮件时，图像不会显示在outlook中使用NetBeans连接器时，NetBeans不会在Chrome中显示图像使用Jetpack Compose时，线圈不会在模拟器中加载图像

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS粘性定位 - 它的真正工作原理！

而新的sticky定位具有所有类型的相似性。使用 position: sticky 使用 position: sticky 时，每个人都很快明白，当视口到达定义的位置时，元素会粘在那里。...Stick 探索在尝试使用 sticky 定位的过程中，我很快发现，当一个具有sticky定位样式的元素被包裹起来，并且它是包裹元素内唯一的元素时，这个被定义为sticky定位的元素并不会"粘"住。...当你使用 position: sticky 定义一个元素时，自动定义了父元素为粘性容器！记住这一点非常重要！容器是粘性项目的作用域，项目无法离开其粘性容器。...在大多数情况下，使用 position: sticky 以将元素固定在顶部，类似于这样： .component{ position: sticky; top: 0; } 这正是它被创建出来的原因...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

2792 0

纯css实现纵向滚动固定表头与横向内容滚动

这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动 ?...之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。...最后突然想到一个position的新属性，sticky 设置了position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时...: sticky; top: 0; } 就成功实现了想要的效果了。...image.png 不过sticky的兼容性也是要考虑一下的。 ? image.png

5.3K0 0

CSS 定位详解

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。 ? 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。 ?...sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。...它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed...div { position: sticky; top: 0; } 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。

1.8K4 0

CSS粘性定位是怎样工作的

探索粘性定位在摆弄它的过程中，我很快就注意到了：当一个具有 position:sticky 样式的元素被包装，且它是包装元素中唯一的元素时，这个被定义为 position:sticky 的元素就不会粘住...当我在包装元素中添加更多元素时，它就能开始正常工作了。这是为什么？这是因为当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它可以粘贴的唯一区域。...粘性元素 —— 是我们用位置定义的 position: sticky 样式。当视口位置与位置定义匹配时，该元素将会浮动，例如： top: 0px 。例： ?...当你定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！记住这一点非常重要！容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。...这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。当到达粘性容器的末端时，元素会停在它的自然位置。最好是在以粘性容器底部为自然位置的元素上使用它。

1.8K1 0

CSS 定位详解

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。...sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。...它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed...div { position: sticky; top: 0; } 1 2 3 4 复制它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。

1.7K1 0

【移动端bug】iOS 下 Input 和 fixed 的问题

那么说明什么是不是虽然看着元素被键盘顶上去了，但是实际上DOM 位置还停留在原地？...所以说明此时，定位元素的 DOM 就不是像上面那样停留在原地了，而是也被顶上去了上面我们暂且得出一个结果 1、定位元素输入框，唤起键盘，页面可以往上滚动的话，定位元素的实际DOM 会停留在原地 2、...说明实际DOM 的位置也被顶上去了，没有停留在原地上面我们知道，光标错位的时定位元素实际dom停在了原地所以我想知道会不会页面文档上虽然看着是往上滚动了，但是Dom也还是停在原地所以也要证明一下...3、页面文档被顶上去时，实际dom是否也停在原地？...最后查看一下正常时按钮的距顶高度，和定位元素输入框聚焦时的距顶高度，如下图你可以看到，聚焦之后，距顶高度变小了，说明往上滚动了说明，页面文档的元素并不是像定位元素那样实际DOM 停留在原地 ?

4.5K6 1

如何运用position:sticky实现粘性布局？

position:sticky 示例看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做？ ?...而使用 position:sticky ，则可以非常方便的实现 Javan的博客 <div...设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。...这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况...如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

2K2 0

探究 position-sticky 失效问题

如果你对 sticky 还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨 position: sticky 生效或者说失效的规则，但是不太充分...其实，不止是 overflow: hidden ，设定为 position: sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效...否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高设定为 position: sticky 的元素的任意父节点的...overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效...:sticky 元素也不会有滚动然后固定的情况在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。

4.7K2 0

使用 position:sticky 实现粘性布局

position:sticky 示例嗯，上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做： ?...设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。...这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况...如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。...这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。开始使用？

1.7K4 0

【前端】CSS : position

static relative 相对定位元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。...元素的位置在屏幕滚动时不会改变。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。...（兼容性不大好）例：多个元素使用sticky .position-sticky { position: sticky; position: -webkit-sticky; background-color...="box">3 4 5 6</

1K1 0

position:sticky的兼容性尝试

在这里主要介绍下关于css3草案的position：sticky属性的兼容。...在pc和安卓的chrome中并未实现该属性，而在pc和iOS 的safari中全部兼容该属性，因此针对iOS可以单独使用sticky完成兼容。...sticky布局有着几个条件： + 元素并不会脱离文档流，当元素被粘在视口的顶部时，原来在文档流中的位置仍然占据，这点类似relative定位 + 元素相对于其最近可滚动的祖先元素“粘性定位”，如果其祖先元素都不能滚动...，则相对于适口定位 + 元素最近的祖先元素overflow设置为非默认值visible时，则元素相对于该祖先元素进行sticky定位。...iOS6版本使用sticky $tab.addClass('sticky'); } .sticky { position: -webkit-sticky; position: sticky

3.7K10 0

【说站】css中sticky属性是什么

css中sticky属性是什么说明 1、position的新属性sticky，在屏幕范围内(viewport)设置sticky元素时，该元素的位置不会受到定位的影响。...(设置为top、left等属性无效)，当该元素的位置将移出偏移范围时，定位又会变成fixed，并根据left、top等属性进行固定。...2、sticky属性解决了对象脱离常规流时下部对象瞬间偏移的问题。就像relative和fixed的组合。...实例 .sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky...; position: sticky; top: 1px; } 以上就是css中sticky属性的介绍，希望对大家有所帮助。

5393 0

神奇的position:sticky

sticky定义 position:sticky定义， eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响...亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...：导航（1）优点：兼容性比较好；不会出现抖动的效果；不会导致回流。...方案三：sticky实现原理直接对导航使用position:sticky，就能实现上边看着复杂的效果。优点：代码量少；不用JS监听滚动事件，减少了浏览器计算的消耗；不会触发 BFC。...可以在移动端使用，代码简单，容易理解。

1.9K2 0

CSS布局：完全掌握position属性

固定定位，相对于浏览器窗口定位 */ position: fixed; /** * 粘性定位，元素在滚动时定位，到达指定位置时变为固定定位 */ position: sticky; position...理解并掌握不同类型的定位相对关系是熟练使用position属性的关键。...四、固定定位的应用 .fixed-item { position: fixed; top: 20px; left: 20px; } 固定定位让元素相对于浏览器窗口进行定位，不会随着页面的滚动而改变位置...五、粘性定位的应用 .sticky-item { position: sticky; top: 20px; } 粘性定位可以让元素在滚动时按指定位置定位，到达指定位置后则变为固定定位，不会影响其他元素位置...七、总结掌握好position属性的使用可以让我们在前端开发中更灵活地实现各种复杂的布局效果，但需要注意避免使用绝对定位过度导致页面不可维护。

3204 0

Position定位

Position定位 CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。...是固定定位，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在中的元素使用fixed是相对于进行定位的，类似于在页面中创建了一个新的浏览器窗口...: fixed; top: 300px; } sticky sticky是粘性定位，元素的位置是基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position...: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position: relative，而当页面滚动超出目标区域时sticky的表现类似于position....t6{ position: sticky; top: 0; } inherit inherit是通过继承父元素的position值来进行定位。

1K2 0

Vue组件设计-Sticky布局

Sticky布局即为粘性定位，常见于一些重要的页面区域在向上滚动时不会被卷起来，在CSS中可以通过设置position:sticky来实现这一功能，但是如果出于兼容性考虑或是一些复杂的场景，就需要我们用传统的方法来实现...: position, height: height + 'px', top: isSticky ?...组件使用 import Sticky from "@/components/Sticky"; export default { components...:{ Sticky:Sticky } };

8382 0

CSS3之positionsticky使用

一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。...设置了position:sticky的元素并不会脱离文档流元素在区域内，元素不受定位的影响（top、left等设置无效）元素所在窗口发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left...另一种场景是在一个盒子中高度固定，窗口有滚动的情况下，实现某元素一直保持在窗口的某个位置三、注意事项父元素高度必须大于sticky元素的高度不设置父元素高度的时候，父元素不能使用除了overflow的visiable...，sticky仅在父元素高度内有效sticky元素需要设置top、bottom、left、right的值四、案列这是本人的测试案例，包含了使用场景和注意事项中的所有条件，可以根据自己的需求进行更改.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border

3181 0

寒假提升｜ Day9 CSS 第七部分

说出结构伪类的nth-child和nth-of-type的区别，并且写出案例练习 :nth-child 只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项....:nth-of-type 计数时只计算同种类型的元素,会排除所有的干扰项三....自己练习使用字体图标从iconfont中下载图标练习方式一通过对应字体图标的Unicode来显示代码; 方式二利用已经编写好的class, 直接使用即可; 四....粘性定位 sticky 另外还有一个定位的值是position: sticky，比起其他定位值要新一些. sticky是一个大家期待已久的属性; 可以看做是相对定位和固定(绝对)定位的结合体; 它允许被定位的元素表现得像相对定位一样...，直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定(绝对)定位; sticky是相对于最近的滚动祖先包含滚动视口的( the nearest ancestor scroll container

7882 0

CSS基础学习（3）

,属性都无效 Position除了static属性外，，还有 relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative...(相对定位) 使用relative(相对定位) 来实现 relative在默认的文档流布局下，进行偏移 .first { position: relative; left: 50px;...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并关键词：最近和非static定位和祖先元素步骤首先获取第一张照片元素发现是absolute布局找寻父节点...(粘性定位) 当页面滑动到相应位置时，该段文字或图片，会随着页面滑动而滑动 h1 { position: sticky; color: yellowgreen; top: 50px...*/ contain /*图像扩展至最大尺寸，完全适应宽度和高度*/ xpx ypx /*手动设置*/ x% y% cover 长宽中较小的一方撑满，contain 长宽较大的一方撑满 /*

6593 0

吸顶效果解决方案

所以需要配合默认图片占位符（base64）使用，或者偷懒先用min-height顶着，上方图片onload时再修正stickyT 三.移动端解决方案从原理上看，直接搬过来是可以的。...，iscroll等等有前辈做了详细测试，见参考资料1 定时器在手指没有离开屏幕时不会执行，touchmove触发频率足够，也能拿到scrollTop，但touchend后，惯性滚动期间，没有任何事件可用...提供了另一种方式：position: sticky，自IOS 6.1就支持了，最近Chrome56才支持这个CSS规则专门负责吸顶，一般用法： .sticky { // 滚过初始位置时自动吸顶...position: -webkit-sticky; position: sticky; // 吸顶时的定位 top: 0; left: 0; // z比下方所有z高...static能为后代元素提供定位参照），但top和left无效滚过初始位置时，和position: fixed表现类似，top和left生效，固定在屏幕可见区域，但页面不会抖动，原本占据的空间还在（自带守家占位符的感觉

3.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭