Z-index

 


The z-index property specifies the stack order of an element.

When elements are positioned, they can overlap other elements.

An element can have a positive or negative stack order

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Z-Index property</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Z-Index</h1>

    <div class="container">
        <div class="black-box">Black box (z-index: 1)</div>
        <div class="gray-box">Gray box (z-index: 3)</div>
        <div class="green-box">Green box (z-index: 2)</div>
    </div>

</body>

</html>

Style.css

* {
    box-sizing: border-box;
}

h1 {
    text-shadow: 2px 2px 4px red;
    margin-bottom: 30px;
}

.container {
    position: relative;
}

.black-box {
    background-color: aqua;
    position: relative;
    border: 2px solid red;
    width: 500px;
    height: 100px;
    z-index: 1;
}

.gray-box {
    position: absolute;
    background-color: blue;
    width: 700px;
    height: 100px;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.green-box {
    position: absolute;
    background-color: rgb(115, 255, 0);
    width: 700px;
    height: 100px;
    top: -15px;
    left: 270px;
    z-index: 3;
}


Output:




Related Posts:

  • Text PropertyCSS Text ColorThe color property is used to set the color of the text.The color is specified by:a color name - like "red"a HEX value - like "#ff0000"a… Read More
  • CSS Linkslinks can be styled in many different waysStyling LinksThe four links states are:a:link - a normal, unvisited linka:visited - a link the user has visi… Read More
  • CSS Font CSS FontFont properties are used to add different styles to the fonts.Font properties are used to change the style, size, weight, etc. of the fo… Read More
  • CSS Box Model  In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every H… Read More
  • CSS Outline CSS OutlineAn outline is a line drawn outside the element's border.CSS has the following outline properties:outline-styleoutline-coloroutline-wi… Read More

0 Comments:

Post a Comment

Do leave your comments