css Position(定位) [第八天]

2024/1/27，最近菜鸟在制作公司官网的时候，用到了position的sticky用于粘贴定位，使用倒是没啥问题，就是感觉有些理解不是很对，所以特来重写该篇文章！

position

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

position 属性的五个值：

• static
• relative
• fixed
• absolute
• sticky

注意：
上述属性的取值又都可以对应上 top、bottom、left、right 这四个属性。元素都可以使用top、bottom、left、right等属性，然而这些属性无法工作，除非先设定position属性。他们也有不同的工作方式，这取决于定位方法。

在理解定位之前，需要先了解，文档流！

文档流

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

注意 （这些都是菜鸟写过的，直接菜鸟主页搜索 “文档流” 就可以看到）：

1、background-position

2、float

参考：css overflow / float [第九天]

3、边距问题

什么是脱离文档流 ？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象（不脱离文档流）。

静态定位的元素不会受到 top, bottom, left, right 影响。

fixed 固定定位（相对浏览器窗口是固定位置）

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

注意：

• Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持

• Fixed定位使元素的位置与文档流无关，因此不占据空间

• Fixed定位的元素和其他元素重叠

特殊情况不相对于视口

参考：position mdn

relative 相对定位（相对其正常位置）

移动相对定位元素，但它原本所占的空间不会改变（不脱离文档流）；相对定位元素经常被用来作为绝对定位元素的容器块。

注意

这里 relative 定位之后的元素虽然不脱离文档流，但是其会产生高度（及后面的定位高于前面的定位，见最下面z-index），例如：你前面的元素使用了 sticky ，那么后面的元素没定位属性时，滚动上去是会被覆盖的，但是给后面的元素加上 relative 后，就不会被覆盖了！

absolute 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>。

absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。

sticky 粘性定位

sticky 英文字面意思是粘、粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

未滚动超出目标区域时，它的行为就像 position:relative; （当然是没有设置任何 bottom、left…的）； 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 它会固定在目标位置，表现为在跨越特定阈值前为相对定位，之后为固定定位。如果一开始元素位置就超出目标区域，则直接按position:fixed; 处理！

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

使用条件

1、父元素不能overflow:hidden或者overflow:auto属性，如果使用的ui组件设置了，就要设置成 overflow: visible; 将其覆盖！

2、必须指定top、bottom、left、right 的4个值之一，否则只会处于相对定位

3、父元素的高度不能低于sticky元素的高度，且sticky元素边界接触到相对的祖先元素后，会推动其一起运动！

4、sticky元素仅在其父元素内生效

问题

注意：

1. 如果 position:sticky; 的元素为block且没有设置宽度，则left、right无效！如果为inline 则还是生效！
   
   
2. 设置了，有时候移动到一定位置，也会失效！（注意：像我底下这样 [靠 white-space:nowrap; 使文本不换行，撑大body] 才会产生的bug；如果是直接设置body的宽度而产生的scroll则不会有该bug） – 》 这里是因为上面的第三个问题引起的，因为不设置width则body宽度为窗口宽度，小于内容宽度

实例：

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">
    我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
</div>
<div class="sticky2">
    我是粘性定位
</div>
<div class="sticky4">
    我是粘性定位
</div>
<div class="sticky3">
    我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
</div>

<div style="padding-bottom:500px">
    <p>滚动我