Example
Set the z-index for an image, so that it is displayed behind the text:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
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) and flex items (elements that are direct children ofdisplay:flex elements).
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
Show demo ❯
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | | | | | |
| z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS Syntax
z-index: auto|number|initial|inherit;
Property Values
| Value | Description | Demo |
| auto | Sets the stack order equal to its parents. This is default | Demo ❯ |
| number | Sets the stack order of the element. Negative numbers are allowed | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit | |
More Examples
Example
Set the z-index for different boxes:
.wrapper {
position: relative;
}
.box1 {
position: relative;
z-index: 1;
border: solid;
height: 100px;
margin: 50px;
}
.box2 {
position: absolute;
z-index: 2;
background: pink;
width: 20%;
left: 65%;
top: -25px;
height: 120px;
opacity: 0.9;
}
.box3 {
position: absolute;
z-index: 3;
background: cyan;
width: 70%;
left: 40px;
top: 60px;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Positioning
HTML DOM reference: zIndex property
W3schools Pathfinder
Track your progress - it's free!
FAQs
Both My Learning and W3Schools Public Profile are completely free of charge, however there are available upgrade plans that can enhance your learning experience. Where can I find My Learning? You can access your My Learning profile through the upper right corner on any W3Schools page.
Why do people avoid W3Schools? ›
Their Embedded Code Examples are Ugly
It's hard to believe a tutorial website as popular as w3schools would post code that looks like this: Not only is it poorly formatted, but it's not using syntax highlighting. And that's just the on-page code examples in their lessons.
What is W3Schools? ›
W3Schools is a school for web developers, covering all the aspects of web development: HTML Tutorial. CSS Tutorial.
Is the W3Schools certificate free? ›
W3schools is and will always be a completely free developer resource. Get started!
Is W3School good or bad? ›
w3schools is a great website, and does it's purpose. BUT it's purpose isn't to teach you how to code (as can be falsely understood from it's name), but to provide a complete “dictionary” for web developing languages such as HTML, CSS, JavaScript and others.
Can you trust W3Schools? ›
W3Schools Certificates are trusted by the top companies and institutions worldwide. We are the largest web developer learning site in the world.
How credible is W3Schools? ›
W3Schools is Trusted by Top Companies
W3Schools has over two decades of experience with teaching coding online. Our certificates are recognized and valued by companies looking to employ skilled developers.
Which is better, Codecademy or W3Schools? ›
Of the two, Codecademy has a simpler structure. You can easily find the topic you want and start learning. Its fixed pricing plans are also easier to understand. In addition, the biggest issue with W3Schools is the ads that keep popping up as you learn.
Who is behind W3Schools? ›
It is run by Refsnes Data in Norway. It has an online text editor called TryIt Editor, and readers can edit examples and run the code in a test environment.
Which country owns W3Schools? ›
W3Schools was originally created in 1998, by Refsnes Data, a Norwegian software development and consulting company.
Through ads : through ads alone they will earn alot in w3schools. They would earn nearly 1–2lacks per day in ads alone. Through donation:. Many people who completed their courses in w3schools, after few years , they would donate some money for the growth of the site .
Does W3Schools cover everything? ›
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Is W3 certification worth it? ›
Please, do not spend your own money on these certifications: they are almost worthless. I say almost worthless because, of course, if your company wants to pay for them and sees value in them then by all means … get that certification.
How popular is W3Schools? ›
The Most Popular Browsers
W3Schools has over 60 million monthly visits.
Can you download W3Schools? ›
W3schools(offline Version) - Free download and install on Windows | Microsoft Store.
Is W3 free to use? ›
W3. CSS is free to use. No license is necessary.
How does w3school make money? ›
Through ads : through ads alone they will earn alot in w3schools. They would earn nearly 1–2lacks per day in ads alone. Through donation:. Many people who completed their courses in w3schools, after few years , they would donate some money for the growth of the site .
Is W3Schools space free? ›
Build and host your website with W3Schools Spaces. Get started with your free website in a few clicks. Everything you need right in the browser. It is easy to use - try it!
