position的几个属性：
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute和relative的使用：
场景：设计师同学设计的样式和组件的不同，刚开始的时候，想着尽量不要去改组件，毕竟很多人用，后来就用到了relative和absolute这两个css样式（最后发现这种在不同情况下改动位置不同，判断起来比较麻烦，还是使用添加slot的方法来解决）。
做了如下实验，设置了三个div
情况1：
正常排列，没有添加样式，这个时候改变div2，设置其position：absolute， 为了明显设置一个top：50px，left：50px，height：100px，运行结果如下图所示：
宽度由文本而定，没有父元素，位置相对于根元素即html元素来定位，是脱离文档流的，会影响原有div3的位置
.div2 { height:100px; background-color: yellow; position: relative; top: 50px; left: 50px;}把上面情况中的absolute换成relative，结果如上图所示，relative不会影响其他div的位置，而且top和left是相对于它自身的位置来定位的。
情况2：给第二个div添加父div
<div class="container2">
这是第二个div的父div
<div class="div2">这是第二个div</div>
</div>
.container2{
position: absolute;
height: 200px;
background-color: greenyellow;
}
.div2 {
height:100px;
background-color: yellow;
position: absolute;
top: 50px;
left: 50px;
}
则结果如下图所示container2的宽度由子控件来撑开，div2相对于父div来定位，如果么有”这是第二个div“则如下图
container没有宽度的情况
若将第二个absolute改为relative
注意：上面两个图的div与父div的上边距是不同的，第一个absolute是相对于父div的。第二个是相对于自身位置的。在没有设置宽度的情况下，第一个设置为absolute宽度为文本的宽度，第二个为relative宽度与俯视图的宽度相同
情况3:保持情况2的两种情况，都讲第二个div的宽度设置为500px得到效果如下
子div为absolute的情况下
子div为relative的情况
由上图可以知道，absolute定位的子元素不会影响父元素的宽度，而relative定位的子元素会撑大父元素。
总结：absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，而宽度不会影响父元素定位为absolute之后，原本的位置相当于空的，下面的元素会来占据。
relative：元素仍然处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小
技巧2：相对父元素居中有如下设计稿
button:first-child::after {
content: "*首付比例：35%-50%";
position: absolute;
font-size: 11px;
font-weight: regular;
top: 43px;
color: #9898a4;
height: 20px;
width: 140px;
left: 50%;
transform: translate(-50%);
}
让下面的小字依据上面的按钮的宽度，居中显示可以采用
left: 50%; transform: translate(-50%);
含义：transform: translate(-50%); 把元素沿着横向（x轴）移动自身宽度的50%，一般是从左侧为开始点也就是0点。而数值是-50%，所以是从左侧0点向左移动自身宽度的50%。
参考：https://blog.csdn.net/weixin_42067967/article/details/80152403
网友评论