一段時(shí)間以來，我一直在嘗試弄清楚如何將圖像放置在以 div 頂部為中心的 div 后面。放置在 div 后面的圖像將是 SVG 圖像，將來我希望將其制作成動(dòng)畫。目前，我提供的代碼有一個(gè) 400 x 400 框的 div，現(xiàn)在我有一個(gè)占位符圖像，它現(xiàn)在浮動(dòng)到 div 的左側(cè)。我想看看是否有人可以幫助我并解決我的問題。我已經(jīng)提供了我正在尋找的預(yù)期結(jié)果的圖像！預(yù)先感謝大家！預(yù)期結(jié)果的圖像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貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊
例如，向圖像添加 z 索引
#productCard {
height: 400px;
width: 400px;
background-color: #FFF;
border-radius: 25px;
z-index: 1
}
會(huì)將卡片放置在具有較低 z-index 的任何物體之上（默認(rèn)情況下，所有物體的 z-index 均為 0），
你也可以做 z-index: -1 等...
慕尼黑的夜晚無繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
你就快到了：
#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 關(guān)注
- 149 瀏覽
添加回答
舉報(bào)
0/150
提交
取消