css布局時,div互相重疊是為什麼

2021-03-12 16:13:12 字數 1427 閱讀 1632

1樓:老爐傳說

在做css+div布局是重疊有很多中情況,我給你分析分析

首先看看乙個容器套兩個字容器的情況,在我們做布局的時候網頁中div之間的關係基本都可以簡化到這種關係。

**如下

top1

top1sun1

top1sun2

下面我們來看一下那種方式可能會產生重疊

1、margin為負數的情況

現在我們將top1suan2的margin-top設定成-10px

可以看到top1sun2向上偏移了10個畫素,因此這中情況是可能產生重疊的。

2、絕對定位

這個不用解釋了,肯定可以產生重疊

3、父容器高度不固定,子容器使用float,看看父容器的兄弟容器會不會產生偏移

不使用float的時候是這樣的

**如下

top1

top1sun1

top1sun2

現在讓top1sun1、top1sun2的float都為left

你會發現,top2容器居然和top1發生了重疊

發生這種情況的原因是因為top1我們沒有設定固定高度,當他的兩個字容器向左浮動時,top1的高度就不會被他的子容器撐開了,這是我們可以選擇兩個方法給top1提供高度佔位,一種是設定固定高度,還有一種是設定top1的overflow為hidden(這種方式會讓父容器高度自適應字容器),現在我們把top1的overflow設定為hidden看下效果

布局達到了我們預想的效果(top1sun2因為設定了margin-top:-10px所以會往上偏移10畫素,多出的部分,因為父容器設定了溢位隱藏,所以看不到了)

2樓:

首先要清楚浮動 ,其次你還要看一下你寫的樣式有沒有調節

3樓:萌mengzhu主

看看是否是容器不夠大。或者設定了float

為什麼父div裡面的子div會重合?css+div布局問題

4樓:鰟鮍魚

如果乙個元素設

bai置了絕對du

定位position:absolute,他就會脫離文件流zhi,即使dao你沒有設定偏移屬性,版它原來佔權的位置也會讓出來,所以排在絕對定位了的元素後面的元素會跑上去,到前面絕對定位了的元素原來所在的位置,所以就重疊了

如果你只是想要用z-index這個屬性又不想破壞布局,可以用相對定位position:relative;,相對定位元素是乙個「佔著茅坑不拉屎」的傢伙,意思就是即使它設定了偏移屬性而離開了它原來的位置,它原來的位置也不會讓出來給別人的,好像它沒有離開一樣

div+css 布局,前兩個div 重疊,

5樓:言言言小魚

這位網友你好,看**應該是沒什麼問題,能把所有完整**貼出來嗎?

怎麼用div布局加css樣式做網頁

方法 步驟。在桌面建立乙個的檔案和的檔案,當然你也可以不用的檔案,但是為了方便操作,還是建乙個吧。只要把記事本另存為就可以了。做好這兩個檔案後我們把網頁的基礎 寫上去,並使index檔案受到的控制,我們右鍵選擇用記事本開啟index檔案輸入 並在head裡寫上使它受到控制。下面我們去寫一些屬性看看是...

css布局,碰到奇怪的序列現象,Css布局,碰到乙個奇怪的序列現象

aa aa ul aa ul li aa ul li span 5.13 這個是基本的css樣式寫法,不過你要通過程式控制 的長度。給樓主個建議 寫float的時候,一定要帶上widthcss參考手冊 用工具測試 很容易就能得到結果 如果是雙倍 可以將容器拉長點 如果恢復了 就反證 2內容超長 不是...

為什麼父div裡面的子div會重合?cssdiv布局問題

如果乙個元素設 bai置了絕對du 定位position absolute,他就會脫離文件流zhi,即使dao你沒有設定偏移屬性,版它原來佔權的位置也會讓出來,所以排在絕對定位了的元素後面的元素會跑上去,到前面絕對定位了的元素原來所在的位置,所以就重疊了 如果你只是想要用z index這個屬性又不想...