t1 文章占位
2. Relative (相对定位)
- 概念：元素相对于其自身的默认位置进行定位，通过
top、right、bottom、left调整其位置。调整位置后，不会影响其他元素在文档流中的位置。 - 应用场景：通常用于微调元素位置，或作为子元素的参照点。例如，为了稍微上移一个图标或按钮，或作为父元素，给
absolute定位的子元素提供一个定位参照。
3. Absolute (绝对定位)
- 概念：元素相对于最近的祖先定位元素（非static）进行定位，如果没有这样的元素，就相对于
<html>根元素。absolute定位的元素脱离文档流，不占据空间。 - 应用场景：适合要相对于父容器来定位的 父容器可以设置相对定位，也就是用于精确布局，例如在图片或者一个块的左上角或者右上角放置图标时，用绝对定位可以精确地控制其在父容器内的位置。
4. Fixed (固定定位)
- 概念：元素相对于浏览器窗口进行定位，不随页面滚动而移动。
fixed定位的元素也脱离文档流，不占据空间。 - 应用场景：适合制作固定导航栏(或者编辑器的工具栏) 、返回顶部按钮、或页面中始终显示的提示框等，通常用于需要随着页面滚动保持在固定位置的元素。
5. Sticky (粘性定位)
- 概念：
sticky定位的元素在滚动时先跟随文档流正常排列(relative的方式)，滚动到一定位置后会“粘附”在视口的某个位置(fixed)。通常结合top、bottom---。 - 应用场景：适合表头, 目录在滚动时保持可见 等场景，兼容性不好,老IE不能用.
- 注意事项: 1.父元素的overflow不能hidden或auto (hidden或auto的话,父亲会生成BCF格式化上下文,粘性元素不能超过这个上下文(BFC块)进行粘贴定位)-----2.初始位置:像个普通的relative定位元素一样,,滚动使top(相对视口)小于top值时候,会变成fixed,粘在视口的一个位置------3.粘性定位是相对父容器的，只在父容器内部生效。这个限制可以避免粘性元素在超出父容器可见范围时仍保持“粘住”的效果。
- 避免失效:1.父元素的overflow不能hidden或auto (hidden或auto的话,父亲会生成BCF块格式化上下文, 子元素就会被限制在这个父容器内，无法依赖整个页面视口进行粘性定位,也就是说原本先relative,然后变成fixed,但是现在他fixed不能依赖于视口了,受限于父容器这个"局部视口",也就是fixed把父容器当做"视口"。 举个例子:粘性定位top是0,0如果父元素有滚动条,那么他是可以随着父元素滚动条的滚动仍固定在父元素顶部的,因为是父容器充当了局部视口,,,但是如果滚动整个页面的话,子元素不会固定在视口的顶部位置，他不能再依赖于浏览器窗口这个视口了。 ------2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位------3.父元素的高度不能低于sticky元素的高度
- Inherit：继承父元素的定位方式，通常用于确保子元素的定位方式与父元素一致。
- Initial：将定位方式恢复为CSS默认的
static定位。
