CSS DIV绝对定位与固定定位用法实例解析

在CSS布局中，绝对定位（absolute）和固定定位（fixed）是两种非常重要的定位方式，它们能帮助我们实现各种复杂而灵活的页面布局效果。

绝对定位（absolute）是相对于最近的已定位祖先元素进行定位的。如果没有已定位的祖先元素，那么它将相对于初始包含块（通常是浏览器窗口）进行定位。

例如，我们有一个HTML结构，包含一个父元素和一个子元素，子元素使用绝对定位。CSS代码如下：

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightgray;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

在上述代码中，父元素设置为相对定位，子元素设置为绝对定位。子元素的top和left属性指定了它相对于父元素的偏移位置。

固定定位（fixed）则是相对于浏览器窗口进行定位的，即使页面滚动，固定定位的元素也会保持在固定的位置。

比如，我们想要创建一个固定在页面右下角的返回顶部按钮，CSS代码可以这样写：

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: green;
  color: white;
  text-align: center;
  line-height: 50px;
}

在这个例子中，.back-to-top元素被设置为固定定位，通过bottom和right属性指定了它在浏览器窗口中的位置。

绝对定位适合在特定的父元素内部进行精确的元素定位，比如创建下拉菜单、弹出层等。而固定定位常用于创建导航栏、返回顶部按钮等需要在页面滚动时保持固定位置的元素。

需要注意的是，使用绝对定位和固定定位时，要考虑到元素脱离了正常的文档流，可能会对其他元素的布局产生影响。在实际应用中，要合理使用这两种定位方式，结合其他布局技巧，以实现理想的页面布局效果。