Non negligible z-index attribute

web front end nine thousand five hundred and two 13 years ago (2011-02-16)

Parameters of z-index attribute in CSS:

z-index auto | number
Auto: default
Number: unitless integer, which can be negative

In pages with absolute positioning layers, sometimes you are worried about layers. In CSS, the z-index attribute can solve this problem.

The larger the value of z-index, the more it will be displayed on the top. It is suitable for positioning elements (position: relative or absolute). It is used to determine the stacking order of elements in the direction perpendicular to the display screen, also known as Z-axis. I think everyone has used it Photoshop Process photos or pictures, which are also composed of several layers.

If the parent element A (z-index: 100) has a child element AA (z-index: 500), and the parent element B (z-index: 200) and the parent element A have a sibling relationship, then no matter how large the z-index value of the child element AA is, it will be overwritten by the z-index: 200 of the other parent element B, because the z-index of the parent element A is only 100.

In the process of web page layout, it is not difficult to find out how many z-index values are not displayed at the top. This is a common problem, but it can be solved by carefully checking the problem.

Solve the problem of z-index in IE6 browser The following three solutions are invalid:

1、 The position attribute of the parent element layer is relative;

2、 The problem layer has no position attribute (excluding static);

3、 The problem layer contains the FLOAT attribute.

The above are several problems that z-index often encounters, which should not be underestimated. The CSS we have mastered is only a fraction of Jiuniu's, and there are many technical aspects that we have not yet touched. We will introduce them to you one by one in the future.