• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
CSS Basic
0/1
What is CSS?
00:00
Ways To Add CSS
0/4
Introduction
00:00
Inline CSS
00:00
Internal CSS
00:00
External CSS
00:00
CSS Colors
0/6
Named Colors
00:00
Hexadecimal Colors
00:00
RGB Colors
00:00
RGBA Colors
00:00
HSL Colors
00:00
HSLA Colors
00:00
CSS Selectors
0/1
Introduction
CSS Comments
0/1
Introduction
CSS Text Formatting
0/1
Various types of Text Formatting
00:00
CSS Backgrounds
0/1
Introduction
00:00
CSS Borders
0/1
Introduction
CSS Outline
0/1
Introduction
00:00
CSS Fonts
0/1
Font Family
00:00
CSS Height and Width
0/1
Introduction
00:00
CSS Margins and Paddings
0/2
CSS Margin
00:00
CSS Padding
00:00
CSS Box Models
0/1
What is CSS Box Model?
00:00
CSS Align
0/5
Text Alignment (text-align)
00:00
Horizontal Centering (margin and auto)
00:00
Vertical Alignment
00:00
Grid Centering
00:00
Table Cell Alignment (vertical-align for table cells)
00:00
CSS Icons
0/1
Introduction
00:00
CSS Links
0/1
Introduction
00:00
CSS Lists
0/1
Introduction
00:00
CSS Tables
0/1
Introduction
00:00
CSS Gradient
0/4
How to use CSS Gradients and its Types
00:00
Linear Gradients
00:00
Radial Gradients
00:00
Conic Gradients
00:00
CSS Display Properties
0/1
Introduction
00:00
CSS Max-Width Property
0/1
Introduction
00:00
CSS Positioning Elements
0/1
Introduction
00:00
CSS Z-Index Property
0/1
Introduction
00:00
CSS Overflow
0/1
Introduction
00:00
CSS Float
0/1
Introduction
00:00
CSS Opacity
0/1
Introduction
00:00
CSS Pseudo-classes
0/1
Various Types of Pseudo-classes
00:00
CSS Pseudo-Elements
0/1
Various Types of Pseudo-Elements
00:00
CSS Forms
0/1
Introduction
00:00
CSS Flexbox
0/3
Introduction
00:00
Container Properties
00:00
Item Properties
00:00
CSS Nav
0/2
How to create Vertical Navbar using CSS?
00:00
How to create Horizontal Navbar using CSS?
00:00
CSS Dropdowns
0/1
Dropdown Creation
00:00
CSS Buttons
0/1
Introduction
00:00
CSS Cards
0/1
How to create Cards using CSS?
00:00
CSS Image Gallery
0/1
How create an image Gallery using css?
00:00
CSS Media Queries
0/1
Introduction
00:00
CSS Variables
0/1
What is CSS Variables
00:00
CSS 2D Transforms
0/1
Various types of 2D Transforms
00:00
CSS 3D Transforms
0/1
Various types of 3D Transforms
00:00
CSS Transition
0/1
Types of CSS Transition
00:00
CSS Animation
0/8
What are CSS Animations
00:00
The @keyframes Rule
00:00
Animation Duration
00:00
Animation Delay
00:00
Animation Iteration Count
00:00
Animation Direction
00:00
Animation Timing Function
00:00
Animation Shorthand property
00:00
CSS Grid Layout
0/3
CSS Layout
00:00
Grid Container
00:00
Grid Item
00:00
CSS
About Lesson

The z-index property in CSS is used to control the stacking order of positioned elements. Elements with a higher z-index value are displayed in front of elements with lower z-index values. Here are a few examples demonstrating the use of the z-index property:

Example 1:

Stacking Div Elements

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <style>
        .box {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
        .box1 {
            z-index: 1;
        }
        .box2 {
            z-index: 2;
            background-color: #aeeeee;
            left: 50px;
            top: 20px;
        }
        .box3 {
            z-index: 3;
            background-color: #98fb98;
            left: 100px;
            top: 40px;
        }
    </style>
    <title>z-index Example 1</title>
</head>
<body>
    <div class=”box box1″>Box 1</div>
    <div class=”box box2″>Box 2</div>
    <div class=”box box3″>Box 3</div>
</body>
</html>

In this example:

  • .box1 has the default z-index of 0.
  • .box2 has a higher z-index than .box1.
  • .box3 has an even higher z-index than .box2.

Output:

 

Example 2:

Stacking Positioned Elements

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <style>
    .container {
      position: relative;
    }

    .box {
      position: absolute;
      width: 100px;
      height: 100px;
      margin: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }

    .box1 {
      z-index: 1;
    }

    .box2 {
      z-index: 2;
      background-color: #aeeeee;
      left: 50px;
      top: 20px;
    }

    .box3 {
      z-index: 3;
      background-color: #98fb98;
      left: 100px;
      top: 40px;
    }
  </style>
  <title>z-index Example 2</title>
</head>
<body>
  <div class=”container”>
    <div class=”box box1″>Box 1</div>
    <div class=”box box2″>Box 2</div>
    <div class=”box box3″>Box 3</div>
  </div>
</body>
</html>

In this example:

  • All .box elements are positioned absolutely within a relative container
  • The stacking order is controlled using the z-index property.

Remember that z-index only applies to elements that have a position value other than static (the default). When elements overlap, the one with the higher z-index appears on top. If two elements have the same z-index, the one written later in the HTML code will appear on top.

Output:

 

 

Previous
Next