Question

正常的z-index顺序使p元素高于h1元素。在我的情况下，两者都有一些背景，h1重叠p作为视觉效果。两个元素都相对定位。因此，当重叠发生时，p会隐藏h1元素的某些部分。是否有一个优雅的解决方案，使p元素的z-index低于h1元素而不必交换它们并使它们绝对定位？

<h1>Title</h1>
<p>description</p>

Answer 1

只需添加z-index即可。它应该工作正常。 Working example.

示例CSS：

h1
{
    position: relative;
    top: 20px;
    left: 20px;
    color: blue;
    z-index: 50;
}
p
{
    position: relative;
    top: 0px;
    left: 0px;
    color: red;
    background-color: yellow;
}

Answer 2

简单。只需在H1中添加相对位置和z-index，在段落中添加负上边距。

示例：http://dabblet.com/gist/3828786

Answer 3

您可以对相对定位的项目使用z-index。您只需要定义position属性。见这里：https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index

Answer 4

在头部添加以下内容：

<style type="text/css">
    h1
    {
        z-index:2;
    }
    p
    {
        z-index:2;
    }
</style>

使z-index中的下一个html元素低于前一个

4 个答案: