gpt4 book ai didi

html - 不同定位元素的 z-index

转载 作者:太空宇宙 更新时间:2023-11-03 18:30:42 28 4
gpt4 key购买 nike

在这里,包含 <p> 的 div (definition)是要放在包含图片(image)的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 {
}

最佳答案

在使用 Z-index 之前,首先要进行一些基本的修正。

在 html 文档中使用的 id 必须是唯一的。对于重复命名约定,您应该使用类。

在容器和图像使用类的代码中。喜欢类=“容器”类=“图片”

关于html - 不同定位元素的 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19878431/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com