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

This article focuses on "how to use CSS to achieve DIV cascading", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use CSS to achieve DIV cascading"!

It takes CSS to make DIV overlap and overlap in the desired order, that is, CSS absolute positioning.

Overlapping styles require major CSS style interpretation

1. Z-index overlap order attribute

2. Position:relative and position:absolute set the object property to be locatable (overlapping)

3. Left right top bottom absolute positioning specific location settings

Mating style

1 、 css width

2 、 css height

3. Background in order to observe the effect, we distinguish between different DIV settings and different background colors

Next, we will provide you with the layout of overlapping and superimposed examples of DIV according to your own wishes. We built four new DIV boxes, one large DIV box, the CSS named ".div-relative", three small DIV boxes in the first big DIV object box, and the DIV named ".div-a", ".div-b" and ".div-c" respectively.

1. Unsorted and sequenced DIV cascading overlapping instances

1. The complete HTML source code is as follows:

Div overlay instances are not stacked in the order www..com. Div-relative {position:relative; color:#000; border:1px solid # 000; width:500px; height:400px}. Div-a {position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} / * css Note: background is red * / .div-b {position:absolute; left:50px; top:60px; background:#FF0; width:400px Height:200px} / * background is yellow * / .div-c {position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} / * DIV background is blue * / my background is red, my background is yellow and my background is blue.

2. Screenshot of div+css instance without DIV cascading order

To achieve DIV layer upon layer overlap (unordered) screenshot of instances

3. Online demonstration of an example: view a case

4. Example description:

We use position to achieve absolute positioning, set the position:relative property on the parent, and set position:absolute plus left or right and top or bottom on the child to realize the arbitrary positioning of the child within the parent. In the original case, the overlap is arranged in the order of the DIV code itself, and the later you enter the DIV box, the more forward it is (floating on it). In addition to changing the order of the source code itself div code in html, we can also use css z-index to implement the order of DIV layers.

Second, control the overlap sequence of DIV through CSS

Using the above absolute positioning example code, we only need to add the z-index style to ".div-a", ".div-b" and ".div-c" respectively to achieve any order.

Expand knowledge:

The value of z-index is a positive integer value, and the higher the number, the higher the floating layer of the object layer (the more forward).

The default order of the above examples is ".div-c" floating on the top layer (blue background layer), ".div-b" floating on the middle layer (yellow background layer), and ".div-a" floating on the bottom layer (red background layer). We then use the z-index style to reverse the order without changing the html code, ".div-b" floats in the middle layer (yellow background layer), ".div-a" floats on the top layer (red background layer), and ".div-c" floats at the bottom (blue background layer).

1. Complete DIV code in cascading and overlapping order as desired:

The stacking order of div overlay instances is www..com. Div-relative {position:relative;color:#000;border:1px solid # 000th widthdiv-relative 500px strategic heightbank 400px}. Div-a {position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px} / * div background color is red * / .div-b {position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width:400px Height:200px} / * background is yellow * / .div-c {position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px} / * background is blue * / my background is red, my background is yellow and my background is blue.

2. Screenshot of div cascading sequence example

The screenshot of replacing the instance with the red background "div-a" and the blue background "div-c" in cascading order

3. This example demonstrates: view a case

4. Without changing the HTML code of the first example, we add z-index to change the cascading order after the absolute positioning of "div-a", "div-b" and "div-c".

At this point, I believe you have a deeper understanding of "how to use CSS to achieve DIV cascading". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.