[分享]css与父对象进行定位

CSS中，定位元素的位置可以相对于其父对象进行定位。比如，我们可以设置一个元素相对于它的父容器进行居中显示。这样可以让页面的布局更加灵活和美观。.parent{ : relative; width: ...

CSS中，定位元素的位置可以相对于其父对象进行定位。比如，我们可以设置一个元素相对于它的父容器进行居中显示。这样可以让页面的布局更加灵活和美观。

.parent{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

在上述代码中，我们先给父容器设置了相对定位，并且指定了它的宽高和背景色。然后，我们设置子元素为绝对定位，将它的顶部和左侧设置为50%。最后，我们使用transform属性将元素水平和垂直方向上移动了自身宽高的一半。

使用这种定位方式，我们可以实现很多布局效果。例如，我们可以设置子元素在父容器底部居中显示。

.parent{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
}

.child{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
} 

在上面的代码中，我们设置子元素的底部为0，左侧为50%，然后使用transform将元素上移自身高度的一半，从而实现了底部居中的效果。

这种相对定位的方法，可以让我们更方便地进行页面布局和设计。我们只需要设置父容器的位置，然后子元素就可以相对于父容器进行定位了。