如何了解 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