How to solve Div overlapping
Div overwrites the DIV, And there is overlap between the DIV and the DIV box, but there is no overlap between the content. Divcss5 introduces the causes and solutions through CSS graphic cases. Causes and solutions for div and Div overwrite.
You may have encountered the layout of the upper and lower structures. The following Div content overlaps the above Div content, or the following content overwrites the above Div layout to form the overlap between the DIV and the DIV coverage; you may have encountered overlapping and overwriting of two adjacent Div boxes. What are these problems? (Music lounge chair)
Next, divcss5 uses cases to demonstrate the overlap of the two compatible Div covers and explains the causes and solutions.
I. overwrite the upper and lower Div boxes-top
1. First, the website Div CSS instance HTML code
<! Doctype HTML>
<HTML>
<Head>
<Title> divcss5 instance Div and Div overwrite </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
. Boxa,. boxb {margin: 0 auto; width: 400px ;}
. Boxa-l {float: Left; width: 280px; Height: 80px; Border: 1px solid # f00}
. Boxa-r {float: Right; width: 100px; Height: 80px; Border: 1px solid # f00}
. Boxb {border: 1px solid #000; Height: 40px; Background: #999}
</Style>
</Head>
<Body>
<Div class = "boxa">
<Div class = "boxa-L"> left content </div>
<Div class = "boxa-R"> right-side content </div>
</Div>
<Div class = "boxb"> contents in boxb </div>
</Body>
</Html>
You can copy the code to discover the DIV coverage. (Music lounge chair)
Instance Code Description:
Set the CSS names of the two big Div boxes to ". boxa and. boxb, set the same width to PX, for ". boxb "sets a black border with a height of 40 PX and a background of Black. Then, add two backend CSS in boxa and name them". boxa-L "". boxa-R ", two small boxes, set the red border, CSS height to 80 PX, the width is 280px and 100px respectively.
2. instance Effect
Div CSS case code
Code in DW software, effect browser (music lounge chair)
3. Problem Analysis
Generally, boxa and. boxb "layout is the upper and lower structure. As shown in the browser, the effect is that the content in the two boxes achieves the upper and lower structure effect, but". boxb "The DIV ran to". "boxa" goes down, but the content is not overwritten, and only the DIV is overwritten.
This is because the sub-level in the first large box uses the floating float attribute, resulting in ". boxa "is not supported, but at the same level". boxb "box and". boxa "closely followed, while". boxa "no height,". boxa "Sub-Level floating and". boxb "is not the same level,". boxb "box still thinks". boxa "has no height, so it causes". boxb "Div box to". boxa "subdiv boxes form overlay and overlap.
4. Solution
Either clear the float or set ". boxa "height. Generally, the fixed height cannot be set if the text content is not determined. boxa "height (of course, you can determine how high the content is, in this case". you can set a height to solve the coverage problem .).
Here we use the CSS clear floating method to solve the problem of overlapping and overwriting of upper and lower Div structures. There are two methods to clear floating.
4-1: CSS clear floating
Add the clear style before closing the ". boxa" box </div> to clear the floating.
Complete HTML source code: (music lounge chair)
<! Doctype HTML>
<HTML>
<Head>
<Title> divcss5 instance Div and Div overwrite </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
. Boxa,. boxb {margin: 0 auto; width: 400px ;}
. Boxa-l {float: Left; width: 280px; Height: 80px; Border: 1px solid # f00}
. Boxa-r {float: Right; width: 100px; Height: 80px; Border: 1px solid # f00}
. Boxb {border: 1px solid #000; Height: 40px; Background: #999}
. Clear {clear: both}
</Style>
</Head>
<Body>
<Div class = "boxa">
<Div class = "boxa-L"> left content </div>
<Div class = "boxa-R"> right-side content </div>
<Div class = "clear"> </div>
</Div>
<Div class = "boxb"> contents in boxb </div>
</Body>
</Html>
Case
Clear floating case with clear style
Clear floating with clear style
Related CSS Tutorials:
CSS clear floating
4-2: CSS overflow clear floating
This method is simpler than the previous method. You only need to add overflow: hidden to the ". boxa" (child-level parent-level box with floating)
The CSS Div instance code is as follows:
<! Doctype HTML>
<HTML>
<Head>
<Title> divcss5 instance Div and Div overwrite </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
. Boxa {overflow: hidden}
. Boxa,. boxb {margin: 0 auto; width: 400px ;}
. Boxa-l {float: Left; width: 280px; Height: 80px; Border: 1px solid # f00}
. Boxa-r {float: Right; width: 100px; Height: 80px; Border: 1px solid # f00}
. Boxb {border: 1px solid #000; Height: 40px; Background: #999}
</Style>
</Head>
<Body>
<Div class = "boxa">
<Div class = "boxa-L"> left content </div>
<Div class = "boxa-R"> right-side content </div>
</Div>
<Div class = "boxb"> contents in boxb </div>
</Body>
</Html>
Div + CSS case effect (music lounge chair)
Apply the CSS overflow style to solve the problem of overlapping Div coverage
Apply the CSS overflow style to solve the problem of overlapping Div coverage
Related CSS Tutorials:
CSS clear float
2. overlap between two adjacent div-top
This kind of newbie has many such problems. Generally, it is because two adjacent divs use floating and one does not use floating. In this way, the two divs overwrite and overlap.
1. Complete CSS + Div code
<! Doctype HTML>
<HTML>
<Head>
<Title> divcss5 instance Div and Div overwrite </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
. AA {float: Left; Border: 1px solid #333; Background: # FFF; Height: 50px ;}
. BB {border: 1px solid # f00; Background: # CCC; Height: 80px}
</Style>
</Head>
<Body>
<Div class = "AA"> I am from AA </div>
<Div class = "BB"> I am from BB </div>
</Body>
</Html>
Introduction code: Set the two boxes to be named ". AA and. bb ", one setting float: left one setting is not set, one setting background is white, one setting background color is gray, one setting height is 50px, And the other setting height is 80px, A border is black and a border is red.
2. Case results
Div and Div coverage case
Div and Div coverage case
3. Problem Analysis
From the test case of the browser, we can see that ". AA "corresponds to the DIV box floating overwrite". bb "corresponds to the DIV box, but the content is not covered, this is because". AA "corresponds to the DIV box using floating, and the same level". the DIV box corresponding to BB does not use floating. One div is not on the same "plane" because it is not floating, but the content is not overwritten. Only the DIV is covered.
4. Solution
Either do not use float; both use float; or set the margin style for the DIV that does not use float floating.
For example, ". AA "corresponds to a box with a fixed width of PX; this uses the pair". "BB" corresponds to the box set margin-left: 302px (greater than 300, you can test and set the required value) to achieve non-overlap coverage. You can set this solution based on this case. For vip members of divcss5, you can ask divcss5 at any time. divcss5 will provide more detailed explanations and introductions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
