Detailed description of the Z-index attribute in the CSS style sheet

Source: Internet
Author: User
Start Z-Index Attribute can only work in a given environment. Z-index attributes It is certainly more frequent than any other attribute that causes (compatibility) Confusion. Once you really understand Z-index attributes , You will find that it is a very convenient and easy to use attribute.

  Z-IndexAttribute determinesHtmlThe level of the element. The element stack level is relative to the element inZOn the axis (XAxisYAxis. A higherZ-IndexThe value indicates that the element is closer to the top in the stacked order. The stacked order is displayed along the vertical line axis. For example, it is more clear. Let's take a look at it first.Z-IndexAttribute Value: Z-index: auto | Number Auto: Default Value Number: An integer with no unit. It can be a negative number. Z-Index Elements with a large value are superimposed on Z-Index When the attribute is not specified, Z-Index Objects with positive values are placed above them, while Z-Index The place with a negative value is below it. Let's talk about it below: Comparison of Z values between positioning elements and influence of Z-index on default values in different browsers In IE Default Value (default)Is: Z-index: 0In ff, the default value is: Z-index: Auto; 1. Z-Index It is precisely this difference in IE/FF that leads to different performance of Z values in IE and ff. 2. Normally: sibling (same level) Elements The latter is onBetween parent and child Child is higher than parent. 3. for positioning elements, the Z value size comparison between non-hierarchical and non-parent-child relationship elements (ie or ff) must be traced back to the two ancestor elements of the sibling relationship, first, compare the Z-index values of these two elements. Only when the Z-index value of brother is greater than the Z-index value of brother, only the "younger brother" and its children and grandchildren can be exceeded.
4. for ie, the default value of the Z-index element is 0. If you do not set the Z-index value of the "brother" and "brother" elements, the Z-index of brother cannot be greater than the Z-index of brother. Then, the "brother" element and its descendants cannot cover the "younger brother" element and its descendants. Once the "brother"'s Z-index is larger than the Z-index of the "brother" element, the situation will be flipped, the "younger brother" element and its descendants will not be able to cover the "elder brother" element and its descendants.
For ff, the default value of Z-index is auto. What does auto mean ", so the zstack's Z-level is only related to their own Z-index. Example of Z-Index Analysis: http://www.po-soft (listly). com/blog/listly/456.html ( Voice Ming: Remove (listly) from the address) )
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.