sticky定位的应用场景_location sticker

导航：

• 1、CSS中position是什么属性，有那些属性值？
• 2、css的position的属性有哪些
• 3、讲讲相对定位、绝对定位、固定定位的理解？
• 4、粘性定位页面滑了一段距离失效
• 5、web前端如何实现一个div固定在某个位置

CSS中position是什么属性，有那些属性值？

position 属性指定了元素的定位类型。

语法，position:static -默认值，没有定位，遵循正常的文档流对象；

position:fixed -元素的位置相对于浏览器窗口是固定位置；

position:relative -相对定位元素的定位是相对其正常位置；

position:absolute --绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html；

position:sticky -粘性定位，基于用户的滚动位置来定位。它的行为就像position:relative;

而当页面滚动超出目标区域时，它的表现就像position:fixed;,它会固定在目标位置。

示例

style

.dianqi{

position：fixed；

｝

css的position的属性有哪些

position 属性指定了元素的定位类型。它有五个属性，分别是

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative：相对定位元素的定位是相对其正常位置。

fixed：元素的位置相对于浏览器窗口是固定位置。注：即使窗口是滚动的也不会移动

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。注：定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。

sticky：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

讲讲相对定位、绝对定位、固定定位的理解？

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 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

用途：页面吸顶效果

粘性定位页面滑了一段距离失效

使用方法不对。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生“动态固定”的效果。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位，等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

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定位之间切换。

标签：sticky定位的应用场景