HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS Z-index

The z-index property in CSS is used to control the stacking order of elements on a webpage. It specifies the stack level of an element along the Z-axis, which determines the order in which elements are displayed on top of each other. Elements with a higher z-index value will appear on top of elements with a lower z-index value.

Syntax

selector {
    z-index: value;
}

The z-index property accepts an integer value, where a higher value means the element will be positioned closer to the user.

Examples

Let's consider a simple example with two div elements:

<div class="box1"></div>
<div class="box2"></div>

Here is the CSS style for the div elements:

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float:left;
    
  
    z-index: 1;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    float:left;
    margin-left:-30px;
    margin-top:10px; 	
    z-index: 2;
}
Result:

In this example, the blue box (box2) will appear on top of the red box (box1) because it has a higher z-index value.

Important Points

.bambis-mom {
   cursor: crosshair;
   orphans: 1;
}