粘性定位怎么写,粘性定位用法

导航：

• 1、CSS中position是什么属性，有那些属性值？
• 2、position属性有哪4种取值?有何区别?
• 3、怎么让DIV在另一个DIV里靠底部显示？
• 4、web前端如何实现一个div固定在某个位置
• 5、粘性定位页面滑了一段距离失效
• 6、讲讲相对定位、绝对定位、固定定位的理解？

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

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

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

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

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

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

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

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

示例

style

.dianqi{

position：fixed；

｝

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优先。

怎么让DIV在另一个DIV里靠底部显示？

可以使用css的position属性的绝对定位。

如图所示：

拓展知识

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

position 属性的五个值：

static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。

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

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

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

sticky：ticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

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

用途：页面吸顶效果