是因为box2的父级元素box1的高度撑开了body,所以box2设置的top是相对于body的,但是sticky还是失效了,失效的原因在于box2的父级元素box1设置了 overflow: hidden/auto/scroll/overlay ,此时设置sticky属性的box2元素参考的滚动元素就不是body了,而是box1,而box1的高度比box2的高度大得多,并不足以让box1实现滚动...
1.它的父元素或者父元素的父元素等(总之就是直系长辈元素)任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时,就会不生效。父元素的高度小于设置sticky元素的高度时 sticky也失效 2.未设置top,right,bottom,left中的任意一个值。相...
1、sticky元素相对定位的父辈元素被设置了overflow相关的属性,如:overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto; 这种情况最常发生了,错误代码如下 代码语言:html 复制 > 2、忘了给sticky的元素设置定位位置属性,left,top,right.bottom 中的一个或多个 ...
一般来说,由于 position: sticky 的作用,随着页面的滚动,sticky 会吸附到页面顶部的固定位置。 但是在某种情况下,它失效了。我反复调试,发现当 sticky 元素(祖先)容器使用了 overflow: hidden 时,sticky 就失效了。这个 overflow: hidden 是我所使用的 UI 框架自带的效果。结构类似于: ...
失效原因有2个 一个是父级以及以上的祖级有overflow:hidden属性,如果有需要改成 overflow: visible 还有一个原因是,父级高度需要大于吸顶对象高度 bootstrap 页面布局 如col-lg-3 是以float做浮动的,高度等于吸顶对象高度,所以导至position: sticky无效
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。 2、positio...CSS...
IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域上面,才失效 ** 间接在页面中写sticky无效 page.wxml <viewstyle="height: 100px">title</view> <viewstyle="position: -webkit-sticky; position: sticky; top: 40px">sticky</view> ...
aside { position: sticky; top: 0; } 但是这样并没有达到我的预期：之所以会出现这种情况，是...
一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。 父元素设置overflow不为visible时失效 0 2. 设置了position:sticky粘性定位的元...