[分享]css两个div 相对定位

在CSS中，我们可以使用相对定位（relative）来让元素相对于其默认位置进行移动或调整位置。下面我们来介绍一下如何使用相对定位的方式来控制两个div元素的位置关系。 我是第一个div 我是第二个d...

在CSS中，我们可以使用相对定位（relative）来让元素相对于其默认位置进行移动或调整位置。下面我们来介绍一下如何使用相对定位的方式来控制两个div元素的位置关系。

<div class="container">
  <div class="div1">我是第一个div</div>
  <div class="div2">我是第二个div</div>
</div>

<style>
.container {
  position: relative;
}

.div1 {
  position: relative;
  left: 50px;
  top: 20px;
}

.div2 {
  position: relative;
  left: 100px;
  top: 40px;
}
</style> 

以上代码将会生成一个父级容器（container）和两个子元素（div1和div2）。在容器的CSS样式中，我们添加了相对定位的声明。在子元素的CSS样式中，我们设置了相对于默认位置的偏移量，其中，div1向右移动了50像素，向下移动了20像素，而div2向右移动了100像素，向下移动了40像素。这样，在容器的默认位置下，两个div元素的位置关系就被调整和改变了。

需要注意的是，使用相对定位可以保留原始位置的占位，但是并不会影响其他元素的位置，因为相对定位是基于本身元素的默认位置进行偏移。所以，在设计页面布局的时候，我们可以使用相对定位来调整和控制元素的位置关系，而不影响其他元素的布局。相对定位通常用于微调位置和实现交互效果，比如hover状态下的元素位置变化。