如何理解z-index？How to understand the property of z-index in css?

如何理解z-index？

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

我们可以把视图上的元素认为是一摞书的层叠，而人眼是俯视的视角，设置z-index的位置，就如同设置某一本书在这摞书中的位置。

• 顶部: 最接近观察者
• ...
• 3 层
• 2 层
• 1 层
• 0 层 默认层
• -1 层
• -2 层
• -3 层
• ...
• 底层: 距离观察者最远

How to understand the property of z-index in css?

The z-index property in CSS controls the vertical stacking order of overlapping elements. The z-index of the default element is 0. We can modify the value of z-index to control the layer position of the element, and the property of z-index can only affect the element whose the value of position is set.

We can think of the elements on the view as a stack of books, and the human eye is the perspective of looking down. Setting the z-index position is like setting the position of a book in the stack of books.

• Top: closest to the observer
• ...
• 3 floors
• 2 layer
• 1 story
• 0 layer default layer
• -1 story
• -2 layer
• -3 floors
• ...
• Ground floor: furthest from the observer