How to use CSS to manipulate two div overlaps

If you implement a div overlap, and you want them to be in the order we want to overlap, which is the absolute positioning of the CSS to achieve, today we will tell you about the overlapping style of CSS implementation method.

Div overlay css Let div cascade, overlay, CSS let two div or a number of div overlap sequentially overlay

It is necessary for the div to overlap and be implemented by CSS in order to overlap, that is, the CSS absolute positioning.

Overlapping styles require major CSS style explanations

1. Z-index Overlapping order properties

2. Position:relative and Position:absolute Set object properties to be anchored (overlapping)

3, left right top bottom absolute positioning specific location settings

Style of mates

1, CSS width

2. CSS Height

3, background in order to observe the effect, we have different div set different background color to distinguish

Next we'll give you a div to overlap and overlay the instance layout as you wish. We create a new 4 div box, a large div box, CSS named ". Div-relative", three small div boxes placed in the first large div object box, the div named ". Div-a", ". Div-b", ". Div-c".

unsorted, Row-ordered DIV Cascade overlapping instances

The full HTML source code is as follows:

<! DOCTYPE html> 


Example Description:

We use position to achieve absolute positioning, to set the Position:relative property on the parent, to set its children Position:absolute plus left or right and top or bottom implement the child to arbitrarily locate within the parent. In the original case the overlap was arranged in the order of the Div code itself, and the later the input Div box was more forward (floating above). In addition to changing the source code itself div code in HTML order, we can also use CSS Z-index to implement the Div layer arrangement order.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!



Related reading:

Initialization of CSS necessity before front-end project start production

Advantages and disadvantages of Asyncio

Detailed front-end responsive layouts, responsive images, and self-made grid systems