CSS 嵌套DIV布局(position属性)

CSS 嵌套DIV布局（position属性）攻略

在CSS中，使用position属性可以控制元素的定位方式。嵌套DIV布局是一种常见的布局技术，通过使用position属性，可以实现更复杂的布局效果。下面是详细的攻略，包含两个示例说明。

1. position属性的取值

position属性有以下几个取值：

• static：默认值，元素按照正常文档流进行布局。
• relative：相对定位，元素相对于其正常位置进行定位。
• absolute：绝对定位，元素相对于其最近的非static定位祖先元素进行定位。
• fixed：固定定位，元素相对于浏览器窗口进行定位。
• sticky：粘性定位，元素在滚动时会固定在指定位置。

2. 嵌套DIV布局示例

示例1：相对定位和绝对定位结合

<div class=\"container\">
  <div class=\"box1\">Box 1</div>
  <div class=\"box2\">Box 2</div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

在这个示例中，.container元素使用相对定位，.box1和.box2元素使用绝对定位。.box1元素相对于.container元素的左上角定位，而.box2元素相对于.container元素的左上角偏移50px。这样，.box1和.box2元素可以重叠或者相对于.container元素进行定位。

示例2：固定定位和粘性定位结合

<div class=\"header\">Header</div>
<div class=\"content\">Content</div>
<div class=\"footer\">Footer</div>

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: gray;
}

.content {
  margin-top: 50px;
  height: 1000px;
  background-color: white;
}

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: gray;
}

在这个示例中，.header元素使用固定定位，将其固定在浏览器窗口的顶部。.content元素使用margin-top属性给.header元素留出空间，并设置了一个较大的高度。.footer元素使用粘性定位，将其固定在.content元素的底部。这样，当页面滚动时，.header元素会保持在顶部，.footer元素会在.content元素滚动到底部时停留在底部。

以上是关于CSS嵌套DIV布局（position属性）的完整攻略，希望对你有所帮助！