[分享]css两个absolute距离

在CSS中，我们经常使用: absolute;属性来实现页面的定位。但是，当我们需要两个元素之间保持一定的距离时，该怎么办呢？这就需要用到CSS中的距离单位。在CSS中，我们通常使用以下几种距离单位：...

在CSS中，我们经常使用position: absolute;属性来实现页面的定位。但是，当我们需要两个元素之间保持一定的距离时，该怎么办呢？这就需要用到CSS中的距离单位。

在CSS中，我们通常使用以下几种距离单位：

 em: 相对于父元素的字体大小计算
  rem: 相对于根元素（即HTML元素）的字体大小计算
  px: 像素
  %: 相对于父元素的宽度计算 

举例来说，如果我们设置两个元素为绝对定位，并且它们的父元素也为绝对定位，那么我们可以使用px单位来设置它们之间的距离。例如：

 .parent {
    position: relative;
  }
  
  .child1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .child2 {
    position: absolute;
    top: 0;
    left: 100px;
  } 

在上面的代码中，我们设置了两个绝对定位的子元素，它们的位置分别为top: 0; left: 0;和top: 0; left: 100px;，这样就能够保证它们左右相隔一定的距离。

当然，如果我们想使用其他的距离单位，也是可以的。例如，如果我们想以比例的方式来设置子元素之间的距离，可以使用%单位。例如：

 .child1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .child2 {
    position: absolute;
    top: 0;
    left: 50%;
  } 

在上面的代码中，我们设置了两个绝对定位的子元素，它们的位置分别为top: 0; left: 0;和top: 0; left: 50%;，这样就能够保证它们左右相隔一半的距离。

总之，在CSS中，通过设置不同的距离单位，我们可以轻松地实现各种各样的元素之间的距离关系，提高页面的视觉效果。