Question

我在html页面上有一个图像和一个段落。

代码如下： -

<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
background-color:red;
z-index:1;
}

p
{
z-index:2;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>This is a sample paragraph for z-index testing</p>
</body>
</html>

这里当z-index为图像小于p标签时，它也出现在p标签上方。

任何人都可以告诉我为什么z-index不能在我的情况下工作??? 提前谢谢

Answer 1

将position: relative分配给<p>以使z-index起作用。

对于OP的澄清：

来自：Any weird rules about z-index I should know about?

此外，孩子永远不会低于其父母。 This example也在Jsfiddle上说明了这一点。

根据您添加的示例，您可以清楚地看到问题：

z-index仅与其父级相关，在大多数情况下，它是文档本身。如果一个兄弟姐妹的z-index低于另一个兄弟姐妹，那么你对第一个兄弟姐妹的孩子所做的任何改变都不能超过其父母的兄弟姐妹。如果您有兴趣，请详细了解stacking context。

这是一个视觉效果：

z-index example

红色交叉是你想要做的事情，用CSS不可能（考虑到那些小盒子是较大盒子的孩子，标记可能看起来像这样：

<div class="one">
</div>
<div class="two">
     <div> I can never be above "one", if my parent "two" isn't. </div>
</div>

解决方案是将“叠加”移动到墙内，或者更好地使用伪元素（渲染为应用元素的子元素），因为叠加层听起来像是表现形式的东西，并且因此，如果叠加div不会增加语义含义，则应保留在CSS的域中。

Answer 2

z-index仅在指定position属性

时才有效

因此请为position: relative代码

指定p

p
{
position: relative;
z-index:2;
}

DEMO

Answer 3

您的p代码也需要position值，因此z-index会影响他。

但在这种情况下，您可以将float:left标记为图像，并将其放在p标记内，以便段落文本将在图像旁边换行。

Answer 4

将图像的z-index更改为-1

img { position:absolute; left:0px; top:0px; background-color:red; z-index: -1; }

Answer 5

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

在您的代码中，p标签的堆叠顺序为2，而img标签的堆叠顺序为1。因此，p标签的堆叠顺序更大，这意味着文本将显示在图像的前面。

如果您想要相反的结果，请尝试对图像和段落使用负值。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
  position: absolute;
  left: 15px;
  top: 45px;
  z-index: -2;
}

看看上面的代码片段是否对您有帮助。

z-index不使用image和p标签

5 个答案: