将图像放置在位于顶部中心的 div 后面
一段时间以来，我一直在尝试弄清楚如何将图像放置在以 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>
翻过高山走不出你浏览 90回答 2
2回答
-
DIEA
例如，向图像添加 z 索引#productCard { height: 400px; width: 400px; background-color: #FFF; border-radius: 25px; z-index: 1}会将卡片放置在具有较低 z-index 的任何物体之上（默认情况下，所有物体的 z-index 均为 0），你也可以做 z-index: -1 等... -
慕尼黑的夜晚无繁华
你就快到了：#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>
随时随地看视频慕课网APP
相关分类
Html5
