分类：position

2021
07-12

详解CSS不受控制的position fixed

目录失效的position:fixedStackingContext--堆叠上下文创建堆叠上下文的方式一探position:fixed失效的最终原因不同内核的不同表现position:fixed的其他问题失效的position:fixed在许多情况下，position:fixed将会失效。MDN用一句话概括了这种情况：当元素祖先的transform属性非none时，定位容器由视口改为该祖先。What！还有这种操作？可能有部分同学还没get到上面这句话的意思，通俗的讲就是指定了position:fixed的元... 继续阅读 >

2021
07-12

浅谈由position属性引申的css进阶讨论

目录1.normalflow2.containingblock3.BFC1.normalflownormalflow(正常流):正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。值得注意的是，在正常流里垂直边距（ve... 继续阅读 >

2016
11-29

CSS 各种定位（position）方式的区别

        static：静态定位是position的默认值，元素框正常生成，也就是没有定位时的正常显示。relative：相对定位用法一：元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白。用法二：把一个元素设置为position:relative;可以使该元素的子元素相对该元素绝对定位。absolute：绝对定位元素从文档流删除，并相对于包含块定位。元素... 继续阅读 >

2014
11-11

jquery实现div层随页面滚动而滚动（固定在某一位置）

翻看ipc.me时觉得右侧的slider会随着页面下翻而始终浮动在窗口边沿下，体验很不错，在张鑫旭的博客中一篇文章的借鉴下，成功实现这样一个功能，代码如下（基于jquery实现，所以事先要在页面中导入jquery文件）：<scripttype="text/javascript">$.fn.smartFloat=function(){varposition=function(element){vartop=element.position().top,pos=element.css("position");$(window).scroll(functio... 继续阅读 >