How to use CSS to manipulate the z-index of a div

Usually it is easy to get confused when we need to use z-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 using absolute 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 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 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}

2, html code snippet

<p class="p -1"></p> 
<p class="p -2"></p> 
<p class="p -3"></p>

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.

Related reading:

How to set the margin attribute of CSS

What are the methods to set the background color of DIV

How to use DIV+CSS

The above is the detailed content of How to use CSS to manipulate the z-index of a div. For more information, please follow other related articles on the PHP Chinese website!