當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div覆盖div DIV相互重叠如何解决

發(fā)布時(shí)間：2023/12/10 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 div覆盖div DIV相互重叠如何解决小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

轉(zhuǎn)載出處：http://www.divcss5.com/rumen/r674.shtml

div覆蓋div,出現(xiàn)div與div盒子之間產(chǎn)生重疊覆蓋現(xiàn)象，而內(nèi)容沒有出現(xiàn)覆蓋重疊現(xiàn)象原因與解決方法。DIVCSS5通過CSS圖文案例介紹產(chǎn)生原因與解決方法。DIV與DIV覆蓋原因與解決方法。

可能您遇到過上下結(jié)構(gòu)的布局，下面DIV內(nèi)容重疊上面DIV內(nèi)容上，也可能下面內(nèi)容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現(xiàn)象；您也可能遇到過相鄰的兩個(gè)DIV盒子發(fā)生重疊覆蓋現(xiàn)象，這些是什么問題如何解決？

接下來DIVCSS5通過案例來演示這兩種兼容性DIV覆蓋重疊現(xiàn)象問題，并解釋原因與解決方法。

一、上下結(jié)構(gòu)DIV盒子覆蓋 ? - ??TOP

1、首先網(wǎng)站DIV CSS實(shí)例HTML代碼

<!DOCTYPE?html>?

<html>?

<head>?

<title>DIVCSS5實(shí)例?DIV與DIV覆蓋</title>?

<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">內(nèi)容左</div>?

<div?class="boxa-r">內(nèi)容右</div>?

</div>?

<div?class="boxb">boxb盒子里的內(nèi)容</div>?

</body>?

</html>?

可拷貝代碼自己動(dòng)手發(fā)現(xiàn)DIV覆蓋現(xiàn)象。

實(shí)例代碼說明：
設(shè)置兩個(gè)大div盒子分別CSS命名為“.boxa”和“.boxb”，設(shè)置寬度相同均為400px,對(duì)“.boxb”設(shè)置一個(gè)黑色邊框與高為40px、背景為黑色的；然后在boxa里添加兩個(gè)一個(gè)靠左一個(gè)靠右CSS命名分別為“.boxa-l”“.boxa-r”，兩個(gè)小盒子，同時(shí)設(shè)置紅色邊框、css高為80px、寬度分別為280px和100px。

2、實(shí)例效果截圖

代碼在DW軟件中，效果瀏覽器截圖

3、問題分析
一般想需要將“.boxa”和“.boxb”布局是上下結(jié)構(gòu)，從上圖發(fā)現(xiàn)在瀏覽器中看到效果是兩個(gè)盒子里內(nèi)容是實(shí)現(xiàn)上下結(jié)構(gòu)效果，但“.boxb”這個(gè)DIV跑到“.boxa”下面去了，但內(nèi)容沒有發(fā)生覆蓋，只有DIV發(fā)生覆蓋現(xiàn)象。

這個(gè)原因是因?yàn)榈谝粋€(gè)大盒子里的子級(jí)使用了浮動(dòng)float屬性而產(chǎn)生了浮動(dòng)，所以導(dǎo)致“.boxa”沒有被撐開，而同級(jí)的“.boxb”盒子與“.boxa”緊貼，而“.boxa”高度沒有，“.boxa”的子級(jí)浮動(dòng)的與“.boxb”不是同級(jí)，“.boxb”盒子依然認(rèn)為“.boxa”沒有高度，所以導(dǎo)致“.boxb”DIV盒子就跑到“.boxa”子級(jí)DIV盒子下面形成了覆蓋重疊現(xiàn)象。

4、問題解決方法
要么清除浮動(dòng)，要么設(shè)置“.boxa”高度，一般情況下文字內(nèi)容不確定多少就不能設(shè)置固定的高度，所以一般不能設(shè)置“.boxa”高度(當(dāng)然能確定內(nèi)容多高，這種情況下“.boxa”是可以設(shè)置一個(gè)高度即可解決覆蓋問題。)。

這里就使用CSS清除浮動(dòng)方法解決上下結(jié)構(gòu)DIV重疊覆蓋問題，清除浮動(dòng)有兩種方法，方法如下。

4-1：css clear清除浮動(dòng)
在“.boxa”盒子</div>閉合前加clear樣式清除浮動(dòng)。

完整HTML源代碼：

<!DOCTYPE?html>?

<html>?

<head>?

<title>DIVCSS5實(shí)例?DIV與DIV覆蓋</title>?

<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">內(nèi)容左</div>?

<div?class="boxa-r">內(nèi)容右</div>?

<div?class="clear"></div>?

</div>?

<div?class="boxb">boxb盒子里的內(nèi)容</div>?

</body>?

</html>?

案例截圖

使用clear樣式清除浮動(dòng)

相關(guān)CSS教程文章：
css clear清除浮動(dòng)

4-2：css overflow清除浮動(dòng)
此方法與上一方法更為簡便簡單，只需對(duì)“.boxa”（子級(jí)有浮動(dòng)的父級(jí)盒子加overflow:hidden）

CSS DIV實(shí)例代碼如下：

<!DOCTYPE?html>?

<html>?

<head>?

<title>DIVCSS5實(shí)例?DIV與DIV覆蓋</title>?

<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">內(nèi)容左</div>?

<div?class="boxa-r">內(nèi)容右</div>?

</div>?

<div?class="boxb">boxb盒子里的內(nèi)容</div>?

</body>?

</html>?

DIV+CSS案例效果截圖

加css overflow樣式解決div重疊覆蓋問題

相關(guān)CSS教程：
css清除浮動(dòng)

二、相鄰兩個(gè)DIV重疊覆蓋 ? - ??TOP

這種新手出現(xiàn)這種問題比較多，一般是由于相鄰兩個(gè)DIV一個(gè)使用浮動(dòng)一個(gè)沒有使用浮動(dòng)，這樣照成兩個(gè)DIV覆蓋重疊現(xiàn)象。

1、出問題完整CSS+DIV代碼

<!DOCTYPE?html>?

<html>?

<head>?

<title>DIVCSS5實(shí)例?DIV與DIV覆蓋</title>?

<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">我是aa里內(nèi)容</div>?

<div?class="bb">我是BB里內(nèi)容</div>?

</body>?

</html>?

介紹代碼：設(shè)置兩個(gè)盒子使用class命名分別為“.aa”和“.bb”，一個(gè)設(shè)置float:left一個(gè)設(shè)置沒有設(shè)置，一個(gè)設(shè)置背景為白色,一個(gè)設(shè)置背景顏色為灰色，一個(gè)高度設(shè)置50px，一個(gè)設(shè)置高度為80px，一個(gè)邊框?yàn)楹谏?#xff0c;一個(gè)邊框?yàn)榧t色。

2、案例效果截圖

DIV與DIV覆蓋案例截圖

3、問題分析
從上圖或?yàn)g覽器測試案例可以看出，“.aa”對(duì)應(yīng)DIV盒子浮動(dòng)覆蓋在“.bb”對(duì)應(yīng)DIV盒子之上，但內(nèi)容沒有覆蓋，這是因?yàn)椤?aa”對(duì)應(yīng)DIV盒子使用了浮動(dòng)，而同級(jí)“.bb”對(duì)應(yīng)DIV盒子沒有使用浮動(dòng)，一個(gè)使用浮動(dòng)一個(gè)沒有導(dǎo)致DIV不是在同個(gè)“平面”上，但內(nèi)容不會(huì)照成覆蓋現(xiàn)象，只有DIV形成覆蓋現(xiàn)象。

4、解決方法
要么都不使用浮動(dòng)；要么都使用float浮動(dòng)；要么對(duì)沒有使用float浮動(dòng)的DIV設(shè)置margin樣式。

比如這里“.aa”對(duì)應(yīng)盒子會(huì)固定寬度為300px;這個(gè)使用對(duì)“.bb”對(duì)應(yīng)盒子設(shè)置margin-left:302px（大于300即可，自己測試設(shè)置需要的值）實(shí)現(xiàn)不重疊覆蓋現(xiàn)象。這個(gè)解決方法自己在此案例基礎(chǔ)上進(jìn)行設(shè)置即可，針對(duì)DIVCSS5的VIP會(huì)員，可以隨時(shí)問DIVCSS5，DIVCSS5將給予更詳細(xì)講解與介紹。

總結(jié)

以上是生活随笔為你收集整理的div覆盖div DIV相互重叠如何解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：软件实施工程师素养
下一篇： HDU 6168 Numbers 思维