Author: Wang Jiaojiao
When: September 5, 2017
Simple z-index, you can determine the level of the level by setting the size of the value, but when transform is involved, z-index is invalid, why?
Spicy because, any element in the web exists in a three-dimensional space, in addition to the well-known x-axis and y-axis in a flat canvas, there is also a z-axis that controls the third dimension .
Using the properties of margin, float, and offset in CSS , you can control the performance of an element on the x-axis and y-axis. The representation on the z-axis can be controlled by z-index and transform . So how do they control the z-axis?
The z-index controls the z-axis and needs to match the position attribute, and the value of the position attribute is relative , absolute , fixed and sticky . And explicitly set a value for the z-index, the larger the value, the higher the level. Simply put, the higher the value, the more the element is on top.
transform can change the stacking order of elements through its translateZ() , the larger the value, the closer it is to the top layer and the closer it is to the screen. However, to change the level of the element's z-axis through transform:translateZ(), you must set transform-style:preserve-3d displayed in the element's parent element or set perspective() displayed in the transform .
@Note: transform will create a higher-level stacking context (stacking context), so z-index will be invalid. There is also the opacity property that can also create stacking contexts .