一段时间以来，我一直在尝试弄清楚如何将图像放置在以 div 顶部为中心的 div 后面。放置在 div 后面的图像将是 SVG 图像，将来我希望将其制作成动画。目前，我提供的代码有一个 400 x 400 框的 div，现在我有一个占位符图像，它现在浮动到 div 的左侧。我想看看是否有人可以帮助我并解决我的问题。我已经提供了我正在寻找的预期结果的图像！预先感谢大家！预期结果的图像body { background-color: #f6b93b; height: 100%; overflow: hidden;}#contentContainer { display: flex; align-items: center; justify-content: center; width: 100%;}#productCard { height: 400px; width: 400px; background-color: #FFF; border-radius: 25px;}<html><head> <title>Snippet</title></head><body> <div id="contentContainer"> <div id="imageContainer"> <img src="https://via.placeholder.com/100"> </div> <div id="productCard"> </div> </div></body></html>
2 回答
DIEA
TA贡献1820条经验 获得超2个赞
例如，向图像添加 z 索引
#productCard {
height: 400px;
width: 400px;
background-color: #FFF;
border-radius: 25px;
z-index: 1
}
会将卡片放置在具有较低 z-index 的任何物体之上（默认情况下，所有物体的 z-index 均为 0），
你也可以做 z-index: -1 等...
慕尼黑的夜晚无繁华
TA贡献1864条经验 获得超6个赞
你就快到了：
#contentContainer {
margin-top: 60px;
position: relative;
}
#imageContainer {
position: absolute;
top: -50px;
}
body {
background-color: #f6b93b;
height: 100%;
overflow: hidden;
}
#contentContainer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 60px;
position: relative;
}
#imageContainer {
position: absolute;
top: -50px;
}
#productCard {
height: 400px;
width: 400px;
background-color: #FFF;
border-radius: 25px;
}
<html>
<head>
<title>Snippet</title>
</head>
<body>
<div id="contentContainer">
<div id="imageContainer">
<img src="https://via.placeholder.com/100">
</div>
<div id="productCard">
</div>
</div>
</body>
</html>
- 2 回答
- 0 关注
- 89 浏览
添加回答
举报
0/150
提交
取消