日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/10 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 div覆盖div DIV相互重叠如何解决 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

轉(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)象；您也可能遇到過相鄰的兩個DIV盒子發(fā)生重疊覆蓋現(xiàn)象，這些是什么問題如何解決？

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

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

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

  • <!DOCTYPE?html>?
  • <html>?
  • <head>?
  • <title>DIVCSS5實例?DIV與DIV覆蓋</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">內(nèi)容左</div>?
  • <div?class="boxa-r">內(nèi)容右</div>?
  • </div>?
  • <div?class="boxb">boxb盒子里的內(nèi)容</div>?
  • </body>?
  • </html>?

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

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

    2、實例效果截圖


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

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

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

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

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

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

    完整HTML源代碼：

  • <!DOCTYPE?html>?
  • <html>?
  • <head>?
  • <title>DIVCSS5實例?DIV與DIV覆蓋</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">內(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樣式清除浮動

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

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

    CSS DIV實例代碼如下：

  • <!DOCTYPE?html>?
  • <html>?
  • <head>?
  • <title>DIVCSS5實例?DIV與DIV覆蓋</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">內(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清除浮動

    二、相鄰兩個DIV重疊覆蓋 ? - ??TOP

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

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

  • <!DOCTYPE?html>?
  • <html>?
  • <head>?
  • <title>DIVCSS5實例?DIV與DIV覆蓋</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">我是aa里內(nèi)容</div>?
  • <div?class="bb">我是BB里內(nèi)容</div>?
  • </body>?
  • </html>?

    • 介紹代碼：設(shè)置兩個盒子使用class命名分別為“.aa”和“.bb”，一個設(shè)置float:left一個設(shè)置沒有設(shè)置，一個設(shè)置背景為白色,一個設(shè)置背景顏色為灰色，一個高度設(shè)置50px，一個設(shè)置高度為80px，一個邊框為黑色，一個邊框為紅色。

    2、案例效果截圖


    DIV與DIV覆蓋案例截圖

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

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

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

    總結(jié)

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

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