One, in the upper and lower structure of the div layout, may appear div overlay Div, but the content does not appear to overwrite the phenomenon. Take a look at an example
1: <! DOCTYPE html>
2:
3:
4: <title>div and div Overlay </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} :. boxb{border:1px solid #000; height:40px; background: #999}One: </style>
:
: <body>
: <div class= "Boxa" >
: <div class= "boxa-l" > Content left </div>
: <div class= "Boxa-r" > Content right </div>
: </div>
: <div class= "boxb" >boxb Box contents </div>
: </body>
:
Generally want to need to ". Boxa" and ". Boxb" layout is the upper and lower structure, from the discovery in the browser to see the effect is two box content is to achieve the upper and lower structure effect, but ". Boxb" This div ran under the ". Boxa", but the content has not been covered, only the div has covered the phenomenon.
This is because the children in the first large box use the floating float property to create a float, so that ". Boxa" is not opened, while the ". Boxb" box with ". Boxa" clings to ". Boxa" Height without a ". Boxa" of the Children floating with "." Boxb "Not sibling,". Boxb "the box still thinks". Boxa "does not have a height, so causes the". Boxb "div box to run to the". Boxa "sub-div box to form overlay overlap.
Problem solving, there are three types of tests:
1. Add a height property to Boxa, and the height value must be greater than or equal to Baxa-l
1: <div class= "Boxa" style= "height:81px;" >
2. Clear floating
Clear the float before the ". Boxa" box </div> close the clear style.
1://css
2:. clear{Clear:both}3:
4://Modify Boxa
5: <div class= "Boxa" >
6: <div class= "boxa-l" > Content left </div>
7: <div class= "Boxa-r" > Content right </div>
8: <div class= "Clear" ></div>
9: </div>
or clear the float on the boxb.
1: <div class= "Boxb" style= "clear:both" >boxb Box contents </div>
3. Add Overflow:hidden to ". Boxa"
1: <div class= "Boxa" style= "Overflow:hidden" >
2: <div class= "boxa-l" > Content left </div>
3: <div class= "Boxa-r" > Content right </div>
4: </div>
Second, adjacent two Div overlay overlay
This problem is generally due to the adjacent two Div one using a floating one without using floating, so as to two div overlay overlap phenomenon.
1: <! DOCTYPE html>
2:
3:
4: <title>div and div Overlay </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>
Ten:
One: <body>
: <div class= "BB" > I am bb content </div>
: <div class= "CC" > I am DD content </div>
: </body>
:
As can be seen from the browser test case, the ". BB" corresponds to the div box floating overlay on ". CC" corresponding to the div box, but the content is not overwritten, because ". BB" corresponds to a div box using a float, while the sibling ". CC" corresponds to a div box without using floats, One uses the floating one without causing the div not to be on the same "plane", but the content does not shine as an overlay, only the div forms the overlay.
Workaround:
1, do not use floating, remove the. BB in the float, the effect is as follows
2, use floating, add Float:left to. CC, the effect is as follows
3. Set the margin style for a div that does not use float floating. Add margin:100px to. cc with the following effect
How do I resolve a problem where div overlay is not covered?
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
