课程:
粘性定位页面滑了一段距离失效
使用方法不对。
sticky生效的前提是,必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生“动态固定”的效果。
它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位,等到父元素完全脱离视口时(即完全不可见),fixed定位自动切换回relative定位。
讲讲相对定位、绝对定位、固定定位的理解?
position 属性指定了元素的定位类型。
position 属性的五个值:
static(默认值)
relative(相对定位)
fixed(固定定位)
absolute(绝对定位)
sticky(粘性定位)
relative 相对定位:相对自身元素的原来进行定位。
移动相对定位元素,但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
用途:
第一个,为微调元素的位置
第二个,做绝对定位的参考(父相子绝)
absolute 绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html(初始包含块)
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
fixed 固定定位:元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关,因此不占据空间
Fixed定位的元素和其他元素重叠
用途:
固定到浏览器窗口固定位置的元素、跟随导航、回到顶部
sticky 粘性定位:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
用途:页面吸顶效果
position属性有哪4种取值?有何区别?
position属性有static、relative、absolute和fixed取值。区别是static,默认值,没有定位。relative,生成相对定位的元素,通过top,left,right的设置相对于其正常位置进行定位。
absolute,生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。fixed,生成绝对定位的元素,相对于浏览器窗口进行定位。
定位类型
大多数情况下,height和width被设定为auto的绝对定位元素,按其内容大小调整尺寸。但是,被绝对定位的元素可以通过指定top和bottom,保留height未指定,来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。
定位元素是其计算后位置属性为relative,absolute,fixed或sticky的一个元素。相对定位元素是计算后位置属性为relative的元素。绝对定位元素是计算后位置属性为absolute或fixed的元素。粘性定位元素是计算后位置属性为sticky的元素。
如果top和bottom都被指定,top优先。如果指定了left和right,当direction设置为ltr时left优先,当direction设置为rtl时right优先。
web前端如何实现一个div固定在某个位置
在前端里面,如何将一个div固定在某个位置,属于css内position定位的内容。position定位属性有五种类型,分别如下:
1.static 定位。html元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
3.relative 定位。相对定位元素的定位是相对其正常位置。
4.absolute 定位。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于整个页面。
5.sticky 定位。粘性定位是基于用户的滚动位置来定位。它依赖于用户的滚动,在position:relative与position:fixed定位之间切换。