div的绝对定位

绝对定位是CSS中的一种定位方式，它允许我们精确地控制元素在页面上的位置，绝对定位的元素不会影响其他元素的布局，也不会被其他元素覆盖，我们可以使用top、left、right、bottom等属性来设置元素的绝对位置。

我们需要了解的是，绝对定位的元素的位置相对于最近的已定位的祖先元素（即设置了position属性的元素），如果没有已定位的祖先元素，那么它的位置将相对于初始包含块。

接下来，我们来看看如何使用top和left属性来设置绝对定位元素的绝对位置。

1. top属性：这个属性用于设置元素距离其最近的定位祖先元素的上边缘的距离，它的值可以是像素（px）、百分比（%）或者em，我们可以这样设置一个元素的top属性：

.element {
  position: absolute;
  top: 20px;
}

在这个例子中，.element元素将被定位在其包含块的顶部边缘上方20像素的位置。

2. left属性：这个属性用于设置元素距离其最近的定位祖先元素的左边缘的距离，它的值也可以是像素（px）、百分比（%）或者em，我们可以这样设置一个元素的left属性：

.element {
  position: absolute;
  left: 30%;
}

在这个例子中，.element元素将被定位在其包含块的左侧边缘的30%，left属性只对块级元素和内联块元素有效，对行内元素无效。

除了top和left，我们还可以使用right和bottom属性来设置元素的右边缘和下边缘的位置，这些属性的值同样是像素（px）、百分比（%）或者em，我们可以这样设置一个元素的right和bottom属性：

.element {
  position: absolute;
  right: 10%;
  bottom: 50px;
}

在这个例子中，.element元素将被定位在其包含块的右侧边缘的10%和底部边缘的50像素的位置。

绝对定位是一种非常强大的定位方式，它可以让我们精确地控制元素的位置，由于它的位置相对于最近的已定位的祖先元素，所以我们需要确保我们的布局设计是基于这种相对位置的，如果我们的设计需要基于绝对的像素位置，那么我们可能需要使用其他的布局方式，如浮动或固定定位。