CSS Z-index layer overlap order

Source: Internet
Author: User

div CSS Z-index layer overlap order

div layer, span layer and other HTML tag layer overlap Order style z-index, usually we use less, but also will inevitably encounter CSS Z-index use. Next DIVCSS5 introduces Z-index from basic to set object stacking order, overlapping order, from basic grammar to application case tutorial to explain learning z-index.
First, Z-index grammar and structure-TOP

Z-index with specific numbers

Such as:
DIV{Z-INDEX:100}
Note: The value of Z-index is not the same as the unit.

The higher the number of z-index, the more forward, and the value must be both integers and positive numbers (integers with positive numbers).
Second, z-index conditions of use-TOP

Z-index is used only when using the absolute positioning Position:absolute property condition. Usually we have different object boxes that overlap in different order, and we just want to z-index the style attributes.
Three, Z-index application case-TOP

To conveniently observe the Z-index style properties, we set up 3 div boxes, set different CSS background colors, and set the same CSS height and CSS width for the body-feeling music massage system. Set the background color to black, red, and blue, respectively. CSS width is 100px,css height of 50px

1. Case CSS Code

/* www.divcs5.com Z-index instance */
. divcss5{position:relative;}
. divcss5-1,.divcss5-2,.divcss5-3
{Width:100px;height:50px;position:absolute;}
. Divcss5-1{z-index:10;background: #000; left:10px;top:10px}
. Divcss5-2{z-index:20;background: #F00; left:20px;top:20px}
. Divcss5-3{z-index:15;background: #00F; left:30px;top:30px}

2. HTML code Snippet

<div class= "Divcss5-1" ></div>
<div class= "Divcss5-2" ></div>
<div class= "Divcss5-3" ></div>

3. Z-index case

div CSS Z-index Overlay sequence case
Z-index Style Practice Example case

Case Description:
Three boxes are all using the Absolute positioning attribute Position:absolute style, Chinese music relax system and set the same height and width style. For the sake of observing we use the left and right properties and assign different values to make them patchwork.

Divcss5-1 box background is black, z-index:10
Divcss5-2 box background is red, z-index:20
divcss5-3 box background is blue, z-index:15

To be able to see the first box z-index:10, so overlap in the lowest layer, and the second box z-index:20, the maximum value so the top overlap, the third box is set z-index:15, centered.
Iv. Summary of Z-index

We use the Z-index overlay order style, we need absolute positioning style in the actual layout, and we can use left and right to locate, with different z-index values to achieve layer overlap order.

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.