html - 在 'a' 标签上堆叠 'p' 标签

Question

我想做的是使用 z-index 属性在“p”标签之上堆叠一个“a”标签。所以我的 html 是这样的

<div id="personalText" >
    <a href="#" id="editButton"> edit </a>
    <p id="descText">{{profile.desc}}</p>
</div>

我的 CSS 是这样的

#editButton
{
    position:relative;
    z-index:2;
}
#descText
{
    position:relative;
    margin-top: 5px;
    margin-bottom:5px;
    z-index:1;
}

我相信这应该将 a 堆叠在 p 标签之上，但那并没有发生。谁能解释一下我做错了什么？

Answer 1

position: relative 不会将元素从布局中分离出来，因此默认情况下，该元素仍占据与其他位置相同的位置。 relative 有两个目的:将元素 relative 偏移到其在布局中的“真实”位置(这需要设置 top、 left 等)，并用作非 static 值，以便具有 position: absolute 的子元素将自己相对于它定位。

综上所述，为了完成您想要做的事情，您可能想要在父级上设置 position: relative，并设置 position: absolute 在编辑链接上(至少)。但这可能会很丑陋，因为文本可能会重叠并且不可读。