2

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

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

4 回答 4

4

只需添加 z-index。它应该可以正常工作。工作示例。

示例 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;
}
​
于 2012-10-03T18:22:22.620 回答
1

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

于 2012-10-03T18:25:38.960 回答
1

简单的。只需将相对位置和 z-index 添加到 H1，并为段落添加负上边距。

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

于 2012-10-03T18:24:20.490 回答
0

在 head 部分添加以下内容：

<style type="text/css">
    h1
    {
        z-index:2;
    }
    p
    {
        z-index:2;
    }
</style>
于 2012-10-03T18:29:08.053 回答