Home > Developer > JavaScript
How can we solve the problem that div content is not covered ?, Div Overwrite
1. In the div layout of the upper and lower structures, the div may overwrite the div, but the content is not covered. Let's look at an example.
1: <!DOCTYPE html>
2:3:4: <title> DIV and DIV overwrite </title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: <style>7: .boxa,.boxb{ margin:0 auto; width:400px;}8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}10: .boxb{ border:1px solid #000; height:40px; background:#999}11: </style>12:13: <body>14: <div class="boxa">15: <div class = "boxa-l"> left content </div>16: <div class = "boxa-r"> right content </div>17: </div>18: <div class = "boxb"> contents in the boxb box </div>19: </body>20:
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.
There are three solutions to the problem:
1. Add a height attribute to boxa. The value of height must be greater than or equal to the height of baxa-l.
1: <div class="boxa" style="height:81px;">
2. Clear floating
Add the clear style before closing the ". boxa" box </div> to clear the floating.
1: //css2: .clear{ clear:both}3:4: // modify boxa5: <div class="boxa">6: <div class = "boxa-l"> left content </div>7: <div class = "boxa-r"> right content </div>8: <div class="clear"></div>9: </div>Or clear the float on boxb.
1: <div class = "boxb" style = "clear: both"> contents in boxb </div>3. Add overflow: hidden to ". boxa"
1: <div class="boxa" style="overflow:hidden">2: <div class = "boxa-l"> left content </div>3: <div class = "boxa-r"> right content </div>4: </div>
2. overlapping coverage of two adjacent DIV
This problem is generally caused by the overlap of two adjacent divs when one is floating and the other is not floating.
1: <!DOCTYPE html>2:3:4: <title> DIV and DIV overwrite </title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: <style>7: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;}8: .cc{ border:1px solid #F00;background:#CCC; height:80px}9: </style>10:11: <body>12: <div class = "bb"> I am from bb </div>13: <div class = "cc"> I am in dd </div>14: </body>15:
From the test case of the browser, we can see that ". bb "corresponds to the DIV box floating covered in". cc corresponds to the above DIV box, but the content is not covered, this is because ". bb "corresponds to the DIV box using floating, and the same level". the DIV box corresponding to cc does not use float. One DIV is not on the same "plane" because it is not floating, but the content is not overwritten. Only the DIV is covered.
Solution:
1. Do not use float. Remove float from. bb. The effect is as follows:
2. Use float to add float: left to. cc. The effect is as follows:
3. Set the margin style for the DIV that does not use float floating. Add margin: 100px to. cc. The effect is as follows:
Source: http://www.ido321.com/669.html
How to make the floating div not overwrite other divAll your divs are absolutely positioned, so the content of the above divs is too much. Of course, it will overwrite the following divs and I modified it for you, you can try to modify the height of the first div, see the following results: ===========================================<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
# ApDiv1 {
Width: pixel PX;
Height: pixel PX;/* modify the value to see the effect */
Background: pink;
}
# ApDiv2 {
Width: 348px;
Height: 65px;
Background: yellow;
}
</Style>
</Head> <body>
<Div id = "apDiv1"> if this content is too large, the following div will be overwritten </div>
<Div id = "apDiv2"> the above grid will overwrite me. Will it not allow me to overwrite me. </Div>
</Body>
</Html>
Div layer coverageSet the z-index of the div
Or <iframe id = "Frame" style = "position: absolute; z-index: 999; width: expression (this. nextSibling. offsetWidth );
Height: expression (this. nextSibling. offsetHeight); top: expression (this. nextSibling. offsetTop );
Left: expression (this. nextSibling. offsetLeft); "frameborder =" 0 "> </iframe>
<Div>
Covered div
</Div>
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
