我有以下布局:
<div class="bg">
<div class="header">
<h1>Hello World!</h1>
</div>
</div>
.bg{
background: green;
}
.header{
height: 500px;
}
我的目标:通过 z 轴在标题内容后面添加元素(省略号)。 (见设计照片)
这个省略号应该绝对定位
我尝试过:
<div class="bg">
<div className="ellipse"></div>
<div class="header">
<h1>Hello World!</h1>
</div>
</div>
然后,我将 .ellipse 绝对定位,并为 .header 指定 z-index: 0 和 z-index:1。实际上,.ellipse 是position:absolute,但.header 是静态的。没有达到预期的效果
您必须设置 bg 和 header 元素的位置(除静态之外)才能使用 z-index。您可以在这里阅读相关内容。
我还稍微调整了代码以匹配您提供的图像。
.bg {
position: relative;
background: #e2ede9;
}
.ellipse {
position: absolute;
top: 10%; /* Adjust these values */
left: -15%; /* Adjust these values */
width: 300px; /* Or the desired size of your ellipse */
height: 300px; /* Or the desired size of your ellipse */
background: #cfe3dc; /* Or the desired color of your ellipse */
border-radius: 50%;
z-index: 0;
transform: translate(-10%, -10%); /* to center the ellipse */
}
.header {
position: relative;
z-index: 1;
height: 500px;
padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="bg">
<div class="ellipse"></div>
<div class="header">
<h1>Hello World!</h1>
</div>
</div>
</body>
</html>