将图像放在朝向顶部中心的 div 后面
[英]Place image behind div positioned towards the top center
问题描述
一段时间以来，我一直试图弄清楚如何将图像放在以 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 个解决方案
解决方案1
2 已采纳 2020-03-28 14:49:47
你快到了：
#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 2020-03-28 14:49:47
例如，向图像添加 z-index
#productCard {
height: 400px;
width: 400px;
background-color: #FFF;
border-radius: 25px;
z-index: 1
}
会将卡片放在 z-index 较低的任何东西上（默认情况下，所有东西的 z-index 都为 0），
你也可以做 z-index: -1 等等...
将图像放在DIV的顶部并居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.