[Html/css]z-index layer overlap order

Directory

Grammatical structure

How to use?

Use case

Summarize

Grammatical structure

Z-index: Specific numbers. such as: div{z-index:100}, note that the numbers followed are not with units. It is mainly used in the cascade processing of labels such as Div,span.

How to use?

Z-index is used only when using the absolute positioning Position:absolute property condition. Often we have different object boxes that overlap in different order, and we need to set the Z-index style.

Use case

For the sake of understanding, we use three different colors of the div for comparison learning.

CSS code:

1 /*Z-index Test Style*/2 . Div{position:relative;}3 . Div1,.div2,.div3{width:100px;Height:50px;position:Absolute;}4 . Div1{Z-index:Ten;background:Red; Left:10px;Top:10px;}5 . Div2{Z-index: -;background:Blue; Left:20px;Top:20px;}6 . Div3{Z-index: -;background:Yellow; Left:30px;Top:30px;}

HTML code:

1 <Divclass= "Div1"></Div>2 <Divclass= "Div2"></Div>3 <Divclass= "Div3"></Div>

Results:

The three Div uses the absolute positioning Position:absolute style, and sets the same width height, in order to be easy to observe, uses the Left,top style to stagger their position.

Visible:

The Red Div is located at the bottom: z-index:10;

Blue Div in the middle: z-index:20;

The yellow Div is on top: z-index:30;

Summarize

When you use Z-index for cascading, you need to use it with the Position:absolute style, and the number that is followed by Z-index can be negative. The larger the value after Z-index, the closer the screen.