CSS position 笔记

relative

  相对于原来的位置进行指定的偏移，但是仍然在标准文档流中，原来的位置会被保留，经常被用来作为绝对定位元素的容器块。

position: relative;
top: -50px;
left: 100px;
/*bottom: 50px;*/
/*right: 100px;*/

absolute

绝对定位的元素的位置相对于最近的已定位父元素，即：

• 如果元素没有已定位的父元素，那么它的位置相对于浏览器定位。
• 如果父级元素存在定位，那么它的位置相对于父级元素定位。

  相对于父级元素或浏览器的位置进行指定的偏移，绝对定位后不在标准文档流中，因此不占据空间，原来的位置不会被保留，绝对定位的元素可以和其他元素重叠。

position: absolute;
left: 100px;
top: 150px;
/*bottom: 50px;*/
/*right: 100px;*/

fixed

  元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，固定定位后元素不在标准文档流中，因此不占据空间，固定定位的元素可以和其他元素重叠。

position: fixed;
top: 30px;
right: 5px;
/*bottom: 50px;*/
/*left: 100px;*/

static

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

position: static;

sticky(兼容性问题)

  粘性定位，顾名思义，基于用户的滚动位置来定位，依赖于用户的滚动，在相对定位与固定定位之间切换。

• 页面滚动在目标区域时，它的行为就像相对定位。
• 页面滚动超出目标区域时，它的表现就像固定定位，会固定在目标位置。

  元素定位表现在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是 top, right, bottom, left 之一，换言之，指定 top, right, bottom, left 四个阈值其中之一，即可使粘性定位生效，否则其行为与相对定位相同。

position: sticky;
top: 0;