如何在 div 中使两个子 div 居中和重叠
在 css 中设置一个父 div 内部的两个子 div 居中并重叠，需要遵循以下步骤：
-
给父 div 设置定位
- 使用 position: relative; 来使父 div 相对于其自身进行定位。
-
给子 div 设置绝对定位
立即学习“前端免费学习笔记（深入）”；
- 使用 position: absolute; 来使子 div相对于父 div 进行定位。
-
居中子 div
- 使用 left: 0;, right: 0;, top: 0; 和 bottom: 0; 属性将子 div 相对于父 div 居中。
-
设置子 div 的大小
- 设置子 div 的 width 和 height 属性来指定其大小。
-
重叠子 div
- 为了让一个子 div 重叠另一个子 div，可以为重叠的子 div 设置更大的大小或更高的 z-index 值。
下面是一个示例代码：
.parent-div {
width: 500px;
height: 500px;
border: 5px solid red;
margin: 100px auto;
position: relative;
}
.child-div1,
.child-div2 {
width: 200px;
height: 200px;
background: blue;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.child-div1 {
width: 400px;
height: 400px;
background: yellow;
}在此代码中，.parent-div 是父容器，.child-div1 和 .child-div2 是子 div。.child-div1 被设置得更大，并覆盖了 .child-div2 的一部分区域，从而实现了重叠效果。
