How to use CSS to manipulate the z-index of a div-HTML Tutorial-php.cn

Usually it is easy to get confused when we need to usez-index, so today we will give you a glimpse of z-index from basic attributes to setting the stacking order and overlapping order of objects. .

z-index syntax and structure

z-index and specific number

For example: p{z-index:100}

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

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

Z-index can only be used under the condition of usingabsolute positioning position:absolute attribute. Usually we have different object boxes overlap and arrange them in different orders, so we need the z-index style attribute.

In order to facilitate the observation of z-index style attributes, we set up three DIV boxes, set differentcss backgroundcolors, and set the same CSS height and CSS width. Set the background color to black, red, and blue respectively. CSS width is 100px, css height is 50px

1, case css code

/* www.pcs5.com z-index实例 */ .p {position:relative;} .p -1,.p -2,.p -3 {width:100px;height:50px;position:absolute;} .p -1{z-index:10;background:#000;left:10px;top:10px} .p -2{z-index:20;background:#F00;left:20px;top:20px} .p -3{z-index:15;background:#00F;left:30px;top:30px}

Copy after login

2, html code snippet

Copy after login

Z-index style practice example case

Case description:

All three boxes use the absolute positioning attribute position:absolute style, and set the same height and width styles. In order to facilitate observation, we use the left and right attributes and assign different values to make them orderly.

Div -1 box background is black, z-index:10

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

Div -3 box background is Blue, z-index:15

means you can see that 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. , the third box sets z-index:15, centered.

4. Summary of z-index - TOP

We use z-index overlapping sequence style. In the actual DIV+CSS layout, we need absolute positioning style, and can use left and right for positioning. , the layer overlapping sequence is arranged through different z-index values.

.p _right{ float:right;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both }

There are so many ways to operate z-index with CSS. Friends who need it can save it. Please also continue to pay attention to other updates on this site.