首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

position设置sticky布局不生效的可能情况

sticky布局的设置很简单,原理也很好理解,因为在这之前我们也曾经用其他定位方式来模拟过这种布局效果,例如,顶部菜单的固定,侧边客服控件的固定等。...但是,在使用sticky布局时也有一些需要注意的情况,这些情况都可能导致你设置的sticky布局不生效,截止目前,我遇到的几种可能情况如下1、sticky元素相对定位的父辈元素被设置了overflow相关的属性...hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto; 这种情况最常发生了,错误代码如下 2、忘了给sticky的元素设置定位位置属性,left,top,right.bottom 中的一个或多个3、设置sticky的子元素,高度超过其设置了定位的父元素

1.6K50
您找到你想要的搜索结果了吗?
是的
没有找到

Position定位

static static属性是HTML元素的默认值,即没有定位,遵循正常的文档流对象,对于top、bottom、left、right、z-index属性的设置都被忽略。...; } relative relative是相对定位,元素的位置是相对其原本位置进行偏移,其不脱离文档流,对于top、bottom、left、right、z-index属性的设置有效...,设置偏移属性后会移动相对定位元素,但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块。...relative元素进行偏移,绝对定位完全脱离文档流与文本流,不占据文档空间,对于top、bottom、left、right、z-index属性的设置有效。...进行定位的,类似于在页面中创建了一个新的浏览器窗口,固定定位完全脱离文档流与文本流,不占据文档空间,对于top、bottom、left、right、z-index属性的设置有效

97320

定位(position)

属性用于定义元素的定位模式,其基本语法格式如下: 选择器{position:属性值;} position属性的常用值 值 描述 static 自动定位(默认定位方式) relative 相对定位,相对于其原文档流的位置进行定位...对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。如下图所示,即是一个相对定位的效果展示: ?...当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。 注意: 绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。...当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。...叠放次序(z-index) 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。

1.2K30

js 设置html标签样式表,js怎么设置css样式?

js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。...1、直接设置style对象(内联样式) 使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。...此对象允许我们指定CSS属性并设置其值。...2、设置style属性–添加全局样式 另一种方法是将里带有CSS属性的元素注入DOM。将在设置应用于一组元素而不仅仅是一个元素的样式时,这非常有用。 首先,我们将创建一个样式元素。...以上就是js怎么设置css样式?的详细内容,更多请关注html中文网其它相关文章! 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

23.6K30

【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )

文章目录 一、超大背景图片设置 1、超大背景图片问题 2、超大背景图片默认显示 3、超大背景图片推荐定位方式 4、超大背景图片编辑策略 二、代码示例 1、背景图片展示 2、代码示例 3、展示效果...一、超大背景图片设置 ---- 1、超大背景图片问题 在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 , 如 : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同..., 原图片 : 如果电脑分辨率很小 , 则只能看到图片背景的左上角 ; 如果电脑分辨率很大 , 则大图片背景显示在屏幕的左上角 ; 3、超大背景图片推荐定位方式 因此这里要设置图片背景的位置..., 一般超大背景图片的背景定位都使用 background-position: center top; 进行定位 , x 轴方向上居中对齐 , y 轴方向上对齐到顶部 , 这样设置 : 如果电脑分辨率很小...background-image: url(images/background1.jpg); background-repeat: no-repeat; /* 超大图片背景位置 */ background-position

1.9K20

CSS position属性

假设元素没有明确的配置position属性,元素默认position 值至static。...1、static:这是表示该元素依照排列和嵌套的顺序和规则应该在的位置,此时设置top,right,left, bottom属性是无效的。...2、absolute:位置參考点是离其近期的配置了position属性值为非static的父节点元素,假设其全部父节点都没有显式配置position属性。则以浏览器窗体的位置为參考。...此时设置top,right,left, bottom属性值有效。 3、relative:位置參考点是其原有位置(该元素position配置为static的位置)。...此时设置top,right,left, bottom属性值有效; z-index属性用于指定三维坐标(x,y,z)中z坐标的值,该值默认是0,能够设置为正数。也能够设置为负数。

71920

position和anchorPoint

一、理论概述 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置...以父层的左上角为原点(0, 0) @property CGPoint anchorPoint; 称为“定位点”、“锚点” 决定着CALayer身上的哪个点会在position属性所指的位置 以自己的左上角为原点...和anchorPoint 添加一个红色图层到绿色图层上,红色图层显示到什么位置,由position属性决定 假设红色图层的position是(100,100)   到底把红色图层的哪个点移动到(100,...红色图层的锚点是(0,0) 红色图层的锚点是(0.5,0.5) 红色图层的锚点是(1,1) 红色图层的锚点是(0.5,0) 3.代码示例 (1)没有设置锚点。...修改这个属性会产生缩放动画 backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画 position:用于设置CALayer的位置。

50340

CSS-定位(position)

1.定位模式(定位的分类) 在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下: 选择器{ position:属性值; } position属性的常用值 值 描述 static...对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。...属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。...子绝父相就是指子元素设置绝对定位,而父元素设置相对定位。 换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)为标准来定位。...当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。

1.5K10

神奇的position:sticky

sticky定义 position:sticky定义, eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响...(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。...亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。...方案二:单导航 通过对导航的position的值在fixed和relative切换,来实现 优点: 比第一种方案少了一个导航,直接在一个导航操作 缺点: 依然需要JS来监听,进行position...方案三:sticky实现原理 直接对导航使用position:sticky,就能实现上边看着复杂的效果。 优点: 代码量少; 不用JS监听滚动事件,减少了浏览器计算的消耗; 不会触发 BFC。

1.8K20
领券