1、相对定位 position: relative
特点： 不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动
拓展：很少单独使用相对定位，一般是与其他定位方式配合使用
参考自身原位置
2、绝对定位 position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点： 脱标，不占位
显示模式具备行内块特点
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置
绝对定位的元素参考的是有定位元素的父元素 最近的，如果父元素没有定位，则参考浏览器左上角
绝对定位，脱离标准流，飞起来，会被占用
3、区别：相对定位参考与自身原来的位置，绝对定位 参考于浏览器左上角
4、固定定位 position: fixed
场景：元素的位置在网页滚动时不会改变
特点： 脱标，不占位
显示模式具备行内块特点
设置边偏移相对浏览器窗口改变位置
5、堆叠元素
z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前⾯，或后⾯）
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前⾯。
给定 z-index 的值为层级的值。（不给默认为0）
层级为 0 的盒子，也比标准流和浮动高
层级为负数的盒子，比标准流和浮动低
层级不取小数
层级一样，后面的盒子比前面的层级高
浮动或者标准流的盒子，后面的盒子比前面的层级高
abselute是不占位置的，relative是站位的。而层级的高低，是和占不占位置没有关系的。
6、粘性定位 sticky
基于⽤户的滚动位置来定位
在未滚动出目标区域时，类似 position:relative;
当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。
.sticky{ position:-webkit-sticky; position:sticky; top:0; background-color:red; border:2px solid orange;}
文章来源地址https://www.toymoban.com/news/detail-709926.html文章来源：https://www.toymoban.com/news/detail-709926.html
到了这里，关于5-web前端 定位position的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
