Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "what is the overlapping order of Css z-index". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Div cssz-index layer overlap order

Div layer, Span layer and other html tag layer overlap sequence style z-index, usually less use of CSS, but will inevitably encounter CSS z-index use.

Learn z-index from basic grammar to application case tutorials.

I. z-index Grammar and structure

Z-index and specific number

Div {z-index:100}

Note: the value of z-index does not follow the unit.

The higher the number of the z-index, the higher the front, and the value must be an integer and a positive number (a positive integer).

II. Conditions for the use of z-index

Z-index can only be used if the absolute positioning position:absolute property is used. Usually CSS allows different object boxes to overlap in different order, and CSS is about z-index style attributes.

III. Cases

1. Z-index overlapping sequence case

In order to facilitate observation, set 3 DIV boxes, set different css background colors, and set the same CSS height and CSS width. Set the background color to black, red, and blue respectively. CSS width is 300px.css height is 100px.

Css code (no z-index attribute added)

.div css5 {position: relative;} .div css5-1, .div css5-2, .div css5-3 {width: 300px; height: 100px; position: absolute } .divcss5-1 {background: # 000 * Black * / left: 10px; top: 10px} .divcss5-2 {divcss5-2 {divcss5-1 {divcss5-1: red * / left: 20px Top: 20px} .divcss5-3 {background: # 00F TX * Blue * / left: 30px; top: 30px} .div css5 {position: relative } .div css5-1, .div css5-2, .div css5-3 {width: 300px; height: 100px; position: absolute;} .divcss5-1 {background: # 000 10px * Black * / left: 10px Top: 10px} .divcss5-2 {background: # F00 X * Red * / left: 20px; top: 20px} .divcss5-3 {background: # 00F * left: 30px Top: 30px}

CSS code (with the z-index attribute added):

.div css5 {position: relative;} .div css5-1, .div css5-2, .div css5-3 {width: 200px; height: 100px; position: absolute } .div css5-1 {z-index: 10; background: # 000 * Black * / left: 10px; top: 10px} .div css5-2 {z-index: 20; background: # F00 / * Red * / left: 20px; top: 20px} .div css5-3 {z-index: 15; background: # 00F css5 * Blue * / left: 30px; top: 30px} .div css5 {position: relative } .div css5-1, .div css5-2, .div css5-3 {width: 200px; height: 100px; position: absolute;} .div css5-1 {z-index: 10; background: # 000 / * Black * / left: 10px; top: 10px} .div css5-2 {z-index: 20; background: # F00 Tracemet * Red * / left: 20px Top: 20px} .div css5-3 {z-index: 15; background: # 00FX * Blue * / left: 30px; top: 30px}

Html code

Unadded effect:

Add the z-index attribute effect:

two。 Case description

All three boxes use the absolute positioning property position style and set the same height and width style. To make it easy to observe that CSS uses the left and right attributes and assigns different values, let them be scattered.

Div css5-1 box with black background, z-index:10

Div css5-2 box background is red, z-index:20

Divcss5-3 box background is blue, z-index:15

In order to see the first box z-index:10, so it overlaps at the bottom, while the second box z-index:20 has the largest value, so the top layer overlaps, and the third box sets z-index:15, centered.

This is the end of the content of "what is the Css z-index overlap order". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.