[分享]css中如何相对父元素定位

在CSS中，我们经常需要使用定位属性来调整元素的位置。其中有一种定位方式叫做相对定位，它可以相对于元素原来的位置进行微调。要使用相对定位，我们需要先设置元素的定位属性为"relative&q...

在CSS中，我们经常需要使用定位属性来调整元素的位置。其中有一种定位方式叫做相对定位，它可以相对于元素原来的位置进行微调。
要使用相对定位，我们需要先设置元素的定位属性为"relative"。这样，元素就会生成一个相对定位的容器，它的位置会相对于它在文档流中的原始位置进行调整。
相对定位还有一个非常有用的特性，就是可以使用top、bottom、left和right属性来精确控制元素的位置。这些属性值可以是一个固定的像素值，也可以是一个百分比值。
下面是一个例子，演示如何在一个相对定位的容器内，将一个子元素向左移动20个像素：

p {
  position: relative;
}

p span {
  position: absolute;
  left: -20px;
} 

在这个例子中，我们首先将p元素的定位属性设置为"relative"，这样它就生成了一个相对定位的容器。然后，我们将span元素的定位属性设置为"absolute"，这样它就脱离了文档流，并且相对于p元素的位置进行定位。最后，我们将它的left属性设置为"-20px"，也就是说，向左移动了20个像素。
实际上，相对定位的元素，它的位置调整也可以相对于父元素内部的另一个元素进行。比如：

<div class="box">
  <p class="text">Hello World!</p>
  <span class="icon"></span>
</div>

.box {
  position: relative;
}

.icon {
  position: absolute;
  top: 10px;
  right: -20px;
}

.text {
  position: relative;
  margin-right: 40px;
} 

在这个例子中，我们将.box元素的定位属性设置为"relative"，它成为了相对定位的容器。然后，我们用绝对定位的方式，在.box内部的.icon元素定位。它的top属性设置为"10px"，也就是距离.box容器顶部10个像素的位置；而它的right属性设置为"-20px"，也就是距离.box容器右侧20个像素的位置。
.text元素也被设置了定位属性"relative"，这里不能直接设置它的right属性，因为它会影响到后面的.icon元素，我们这里使用了margin-right属性来间接地调整它与.icon元素的距离。
总结一下，相对定位是CSS中一种非常灵活的定位方式，它可以让我们精确地控制元素的位置，将元素位置调整到任何我们想要的位置。对于需要在父容器内部进行相对定位调整的情况，我们只需要设置好父元素的定位属性为"relative"，就可以方便地进行定位了。