Question

Normal z-index order makes p element here to be higher than h1 element. In my situation both have some background and h1 is overlapping p a little as a visual effect. Both elements are positioned relatively. So as the overlapping happens, p hides some part of h1 element. Is there an elegant solution to give p element lower z-index than h1 element without having to swap them and making them absolutely positioned?

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

Answer 1

Just add the z-index. It should work fine. Working example.

Sample 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;
}
​