Overlap

z-index

The z-index property is used to describe how items overlap. By default, elements created later in the HTML code will overlap ones that appear earlier. If you want to change that, specify the z-index. Items with a lower z-index appear lower than those with a higher one. Here's an example. First try the page without the z-index CSS property, and then see how z-index changes it.

    <h1>Heading</h1>
    <p>Paragraph text. This is a sentence.</p>

    p {
        width: 200px;
        height: 50px;
        background-color: green;
        position: fixed;
        top: 120px;
        left: 100px;
        
        z-index: -1;
    }

    h1 {
        background-color: purple;
        position: fixed;
        top: 100px;
        left: 100px;
    }