一段時間以來，我一直在嘗試弄清楚如何將圖像放置在以 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 關注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消