[分享]css中常用的定位方式

CSS中的定位方式是指根据视口或者父级元素的位置来摆放元素的方法。常用的定位方式有如下几种：

.positioned {
  position: relative;
  top: 25px;
  left: 50px;
} 

1. 相对定位（position: relative）
相对定位是相对于元素原来所在的位置而进行微调的一种方式。比如说，我们可以用top和left属性来相对于元素原来的位置上下左右移动元素。

.positioned {
  position: absolute;
  top: 0;
}
.parent {
  position: relative;
} 

2. 绝对定位（position: absolute）
绝对定位是相对于父级元素的位置而进行定位的一种方式。我们可以用top、bottom、left、right等属性来摆放元素的位置。需要注意的是，如果父级元素没有设置position属性，则绝对定位的元素会相对于页面的最外层元素进行定位。

.positioned {
  position: fixed;
  bottom: 0;
  right: 0;
} 

3. 固定定位（position: fixed）
固定定位是相对于视口而进行定位的一种方式。当我们需要让一个元素在页面滚动时保持不动，就可以使用固定定位。

.box {
  display: inline-block;
  margin: 30px;
}
.parent {
  text-align: center;
}
.parent {
  display: flex;
  justify-content: space-between;
} 

4. 弹性盒子定位（display: flex）
弹性盒子定位可以让元素在一个弹性容器中自适应地进行布局。通过设置容器的display属性为flex，就可以定义出各种弹性盒子布局方式，比如居中、两端对齐等等。