Question

What I am trying to do is to stack an ‘a’ tag on top of a ‘p’ tag using the z-index property. So my html goes like this

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

and my CSS goes like this

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

I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?

Answer 1

position: relative doesn’t detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its “real” position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.

With all that said, what you probably want in order to do what you’re trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that’d probably be quite ugly, as the text would likely overlap and be unreadable.