How to use CSS to manipulate two div overlaps

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.