Coding Schools


 
Python | C Sharp | Azure AI | HTML | JavaScript | CSS | SQL Server
How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS z-index attribute



The z-index property in CSS is used to control the stacking order of elements on the web page along the z-axis (the third dimension, which is perpendicular to the screen). Elements with a higher z-index value are stacked above elements with a lower z-index value. The z-index property only works on positioned elements (those with a position of relative, absolute, fixed, or sticky).

Basic Usage

You can set the z-index property like this:

css
.element {
    position: relative; /* or absolute, fixed, sticky */
    z-index: 10; /* Higher values are placed above lower values */
}

Example

Here are some examples to illustrate the use of z-index:

Example 1: Basic Stacking

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index Example</title>
    <style>
        .box1 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 1; /* Lower stacking order */
        }
        .box2 {
            position: absolute;
            top: 80px;
            left: 80px;
            width: 100px;
            height: 100px;
            background-color: blue;
            z-index: 2; /* Higher stacking order */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

In this example, .box2 is placed above .box1 because it has a higher z-index value.

Example 2: Negative z-index

css
.element {
    position: relative; /* or absolute, fixed, sticky */
    z-index: -1; /* Places the element behind other elements */
}

A negative z-index value places the element behind other elements.

By using the z-index property, you can control the stacking order of elements to achieve the desired layout and visual effects. Let me know if you need more details or examples!




All rights reserved | Privacy Policy | Sitemap