在这里,包含<p>
(定义)的 div 被放置在包含图像(图像)的 div 后面。我尝试在定义 div 上进行绝对定位,以便它应该出现在与图像相同的堆栈上,如下所述。
definition {
position: absolute;
top:0
}
但是,设置 z-index 不再起作用。如果有人有任何解决方案,请帮助我。这是我的整个代码。
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div id="outer_container">
<div id="container">
<div id="image">
<img src="work_pic.jpg" />
<div id="definition">
<p>Nothing</p>
</div>
</div>
</div>
<div id="container">
<div id="image">
<img src="work_pic.jpg" />
<div id="definition">
<p>Nothing</p>
</div>
</div>
</div>
<div id="container">
<div id="image">
<img src="work_pic.jpg" />
<div id="definition">
<p>Nothing</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
#outer_container {
text-align: center;
}
#container {
position: relative;
display: inline-block;
}
#definition {
background-color: red;
}
#image {
}