Introduction to the random overlap method of CSS Implementation p

This article mainly for the introduction of let p overlap and in order to overlap the need for CSS to achieve, that is, CSS absolute positioning to implement, the need for friends can refer to the next to let p overlap and in order to overlap the need for CSS to achieve, that is, CSS absolute positioning to implement.
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 p set different background color to distinguish

Next we give you the p to overlap and overlay the instance layout as you wish. We create a new 4 p box, a large P-box, CSS named ". P-relative", three small P-boxes placed in the first large P-Object box, p named ". P-a", ". P-b", ". P-c", respectively.

One, unsorted, row order p stacked overlapping instances

1. The complete HTML source code is as follows:

1. <! DOCTYPE html> 

2, P+css instances of non-row p stacking order



Instance Description:

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

Second, control p overlap order through CSS

We use the above absolute positioning instance code, only need to ". P-a", ". P-b", ". P-c", respectively, add the Z-index style can be arranged in any order.

Extension Knowledge: The value of the

Z-index is a positive integer value, and the larger the number, the higher the top of the object layer.

The default order of the above instances is ". P-c" floating in the top (blue background layer), ". P-b" floating in the middle (yellow background layer), ". P-a" Row at the bottom (red background layer). We then use the Z-index style to implement the order subversion without changing the HTML code, ". P-b" floats in the middle (yellow background layer) sort unchanged, the implementation of ". P-a" floats at the top (red background layer), ". P-c" Row at the bottom (blue background layer).

1, the implementation of the desired arrangement p CASCADE overlapping order full HTML code:

1. <! DOCTYPE html> 

2, p stacking order instance



Implementing a red background "p-a" with a blue background "p-c" cascade Order Replacement Instance

We do not change the first instance of the HTML code, the "P-a", "P-b", "P-c" After the absolute positioning is implemented, the cascade sequence changes are implemented by adding z-index.

Three, p overlap Summary

to implement p overlap, and change the implementation of P-box stacking overlap order, we use position:relative for the parent, child-level using Position:absolute, Z-index (overlapping order), Left,right,top,bottom absolute positioning is equivalent to the parent-specific location.