css如何控制 2个div 的 部分 重叠在一起 并将重叠的部分分成2份上下排列
时间: 2023-09-04 20:03:43 浏览: 82
要实现 div 的部分重叠并将重叠部分分成两份上下排列,可以使用 CSS 的定位属性来控制。
首先, 创建2个 div 元素,分别为 div1 和 div2。然后给这两个 div 添加相同的宽度和高度,以及需要重叠的内容。
接下来,给 div1 添加一个负的上边距(margin-top: -50px;),使其向上移动,与 div2 重叠部分对齐。
然后,给 div2 添加一个相对定位的上边距(position: relative; top: 50px;),使其向下移动,与 div1 的重叠部分分开。
最后,用适当的布局方式(如文本居中)来排列 div1 和 div2 元素。
以下是一个示例代码:
HTML:
```
<div class="container">
<div class="div1">重叠部分内容</div>
<div class="div2">重叠部分内容</div>
</div>
```
CSS:
```
.container {
position: relative;
width: 200px;
height: 100px;
}
.div1, .div2 {
width: 100%;
height: 50px;
text-align: center;
background-color: gray;
}
.div1 {
margin-top: -50px;
}
.div2 {
position: relative;
top: 50px;
}
```
通过上述代码,div1 和 div2 的重叠部分会上下分开,并按照设定的样式进行排列。