同时实现两个并列的div 两个嵌套的div 两个重叠的div

在HTML和CSS中，你可以通过不同的布局技术来同时实现这三种情况：

1. **并列的 div**：如果你想让两个`<div>`元素水平排列在一起，可以使用`display: inline-block;` 或 `float: left;` 属性。例如：

   <style>
   .container {
     display: flex; /* 使用Flexbox */
   }
   .column {
     width: 50%;
   }
   </style>
   <div class="container">
     <div class="column">Div 1</div>
     <div class="column">Div 2</div>
   </div>

2. **嵌套的 div**：如果需要一个`<div>`包含另一个`<div>`，只需创建包含关系即可：

   <div class="parent-div">
     <div class="child-div">这是嵌套的 div</div>
   </div>

CSS中不需要特别设置，默认就是嵌套关系。

3. **重叠的 div**：若需使两个`<div>`部分重叠，可以调整它们的z-index、position属性以及使用层叠上下文规则：

   .overlap-one {
     position: relative;
     z-index: 1;
   }
   .overlap-two {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
   }

然后在HTML中应用这些样式：

   <div class="overlap-one">Div 1 (背景)</div>
   <div class="overlap-two">Div 2 (覆盖)</div>