What is the purpose of the z-index and how is it used? | Sololearn: Learn to code for FREE!
Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren
+ 2

What is the purpose of the z-index and how is it used?

10th Jun 2020, 11:26 AM
Pranjal Hejib
Pranjal Hejib - avatar
4 Antworten
+ 5
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). Read More : https://www.w3schools.com/cssref/pr_pos_z-index.asp
10th Jun 2020, 11:34 AM
Daniel S─âvescu
Daniel S─âvescu - avatar
+ 3
<div style="height:100px;width:100px; background-color:red;position:absolute;z-index:3"></div> <div style="height:100px;width:100px;background-color:blue;position:absolute;z-index:2"></div> Try playing around with values for z-index
10th Jun 2020, 11:39 AM
Abhay
Abhay - avatar
+ 1
hello,Pranjal The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number. An element with a higher z-index is always stacked above than a lower index. Z-Index can take the following values: Auto: Sets the stack order equal to its parents. Number: Orders the stack order. Initial: Sets this property to its default value (0). Inherit: Inherits this property from its parent element. i hope this will help to you
11th Jun 2020, 7:09 AM
Ishan Shah
Ishan Shah - avatar
+ 1
The purpose of z-index in make something more visible than others for example if you want some elements to more visible than others in the div You just play around with the z-index value Giving what you want to more visible a positive number of z-index(z-index :1) and what you want to be less visible a negative number of z-index(z-index :-1). It can also work when you have something fixed but you don't want it to be hidden by other elements or being under other elements on html body when scrolling so You will just give a z-index number more positive than any other element contained with the html body. just play around with values and will surely figure it out.
12th Jun 2020, 2:34 AM
Annate Dhambuze
Annate Dhambuze - avatar