[Introduction to CSS] How to use z-index?

You can change the stacking order of elements using the CSS property z-index.

Since it is not used frequently, some people may be worried at first that they do not know when to use z-index, or that it does not display as expected even if they try to use it.

This time, for those who want to understand and use the z-index rules of CSS,

I will explain according to the above items.

After reading this article, you will be able to understand the basic usage of z-index in CSS .

Please read to the end!

What is z-index?

z-index is a property that allows you to define the stacking order of elements .

As the name z-index suggests, the stacking order of elements is specified in the Z-axis direction. By the way, the horizontal direction of the page layout is the X axis, and the vertical direction is the Y axis.

As a general rule, if nothing is specified, the element described later will overlap on top.

By specifying the z-index, you will be able to stack the previous one in front .

Let’s explain what values ​​can be specified and in what situations they are used.

about the value

The z-index value is mainly specified as an integer. With 0 as the base, elements with higher values ​​are stacked higher .

You can also specify a negative number, with negative elements placed lower.

I will write in detail.

<div class="sample">
  <p class="item1">アイテム1</p>
  <p class="item2">アイテム2</p>
  <p class="item3">アイテム3</p>
</div>

.sample {
  position: relative;
}
.item1, .item2, .item3 {
  position: absolute;
  padding: 10px 15px;
}
.item1 {
  top: 0;
  left: 0;
  z-index: 30;
  background: #ffd700;
}
.item2 {
  top: 30px;
  left: 30px;
  z-index: 20;
  background: #ff7f50;
}
.item3 {
  top: 60px;
  left: 60px;
  z-index: 10;
  background: #0000cd;
}

If not specified, item 1, item 2, and item 3 will be stacked on top of each other, but the order is reversed by specifying z-index.

Also, z-index only applies to elements with a non-static position.

In the above code, “position: absolute” is specified for the item.

What time do you use it?

z-index is a property used when elements overlap, such as position: absolute , as described above .

It is often used to fix the position of headers and footers so that they do not move when the page is scrolled.

header {
  position: fixed;
  z-index: 1;
}

With the above code, the header is now fixed at the first position and does not flow.

A z-index is specified to prevent the element behind it from covering and disappearing.

What to do when z-index doesn’t work

If you don’t understand how z-index works, you may end up with something that doesn’t show up as expected even if you’ve specified the stacking order.

Note that the z-index does not necessarily mean that the higher numbered elements are on top .

For example, even if item 1 is “z-index: 30” and item 2 is “z-index: 10”, if the parent element of item 1 is “z-index: 1” as shown below, Item 1 is placed below Item 2.

<div class="sample1">
  <p class="item1">アイテム1</p>
</div>
<div class="sample2">
  <p class="item2">アイテム2</p>
</div>

.sample1 {
  position: relative;
  z-index: 1;
}
.sample2 {
  position: relative;
}
.item1, .item2 {
  position: absolute;
  padding: 10px 15px;
}
.item1 {
  top: 0;
  left: 0;
  z-index: 30;
  background: #ffd700;
}
.item2 {
  top: 30px;
  left: 30px;
  z-index: 10;
  background: #ff7f50;
}

Due to the above rules, the work becomes complicated when trying to manage the order of distant elements.

When specifying the stacking order, we recommend that you do so within the same element.

Also, it’s very basic and easy to forget, z-index doesn’t apply when the position is static.

Don’t forget to specify another value for position as well.

Summary: Let’s make a stylish page with z-index

This time, we have explained the basic features and usage of z-index in CSS.

I also showed you what to do if it doesn’t work.

Knowledge of z-index is essential if you want to create stylish web pages .

Let’s master how to use this opportunity. I hope that this article will be of help to you.