HTML/CSS What is the role of z-index in CSS positioning?

[shivajikobardan]

TL;DR Summary

Can't see what is z-index doing in CSS.

I'm following "CSS Cookbook" by Christopher Schmitt to learn CSS.
I am going through this example.

<div class="image">text goes here</div>

.image {
  position: relative;
  z-index: 20;
  width: 130px;
  height: 140px;
  background-image: url(circle.png);
  border: 1px solid black;
  background-repeat: no-repeat;
  background-size:cover;
}

I'm seeing no difference with or without z-index. z-index should be stacking elements but not sure what does that mean here. (I don't have access to book's images that's why I'm using my own images).

Here's the image that I'm using:
https://upload.wikimedia.org/wikipe...imple.svg/800px-Circle_-_black_simple.svg.png

 

[pbuk]

I'm following "CSS Cookbook" by Christopher Schmitt to learn CSS.

The most recent edition of that book was published in 2009. Use something more up to date e.g. the W3 schools guide https://www.w3schools.com/cssref/pr_pos_z-index.php.

I'm seeing no difference with or without z-index. z-index should be stacking elements but not sure what does that mean here.

What does a stack of one element look like?

Here's the image that I'm using:

You should not use WikiMedia images for this, use free images designed for this purpose e.g. Link Removed

 

[shivajikobardan]

example of w3schools wasn't very clear. anything else you can recommend? mdn docs was too vast.

 

[Filip Larsen]

The docs at mozilla are usually quite good. In this case take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/z-index.

 

[Greg Bernhardt]

Think of web elements as existing on a layer with the page theoretically consisting of infinite layers. z-index allows you to move elements forward and back between those layers.

 

[FactChecker]

The z-index has a long history in computer graphics. It tells which objects are in front of others so you can't see what is behind. I imagine it is used the same way in CSS. If one z-index level is completely opaque then it will block anything behind it (lower z-index) but not anything in front of it (higher z-index).

 

[Filip Larsen]

One important detail to note is that each stacking context is independent of each other, so elements can only be z-ordered relative to each other if they are within same context, i.e. they share a common ancestor that act as stacking context.

 

[shivajikobardan]

The docs at mozilla are usually quite good. In this case take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/z-index.

I find them very confusing for most of the times. Thanks for the recommendations.

 

[.Scott]

The default z-index is zero (far background).
So if you only assign a z-index to one element, and that z-index is a positive value, it will be position to the foreground.
So, in a sense, you can't use z-index to send something into the background - because with the default, it is already there. You need to assign the z-index to the images you want in front.

Also, don't expect the z-index parameter to work inside an svg section. For svg, only the order of the elements matters - but there are methods for rearranging the elements.

 

[pbuk]

The default z-index is zero (far background).

The defaut z-index value is 0, but this is not the far background: elements with a negative z-index will be rendered behind elements with z-index of 0 in the same stacking context.

 

[DaveC426913]

It's also helpful* to recognize that it does not work unconditionally. I've worked with it a lot and found its applicability rather finicky. See Filip Larsen's post #7 for example.

*actually not helpful at all

Better to come with extant examples and figure out how it's borked and how to fix it.