如何讓溢出div：隱藏重疊浮動div？

我正在使用第三方內聯HTML編輯器（CKEditor）的網站上工作。我將編輯器控件包裝在一個相對定位的DIV中，並且它的z-index位於可見堆棧的頂部。問題在於，在某些頁面右側存在浮動圖像（float：right）。一些CKEditor樣式將overflow屬性的元素設置爲hidden（overflow：hidden）。如何讓溢出div：隱藏重疊浮動div？

因此，儘管我的包含DIV比浮動圖像具有更大的Z-index，CKEditor元素不會在圖像頂部溢出。這創建了一個看起來好像編輯器的右上角已被刪除的結果。

有沒有辦法可以解決這個問題，而不嘗試編輯CKEditor樣式？看看這個例子sinario：

http://jsfiddle.net/nmartin867/StHJA/

HTML

<body> 
<div class="floating"> 
    I'm floating! 
</div> 
<div class="container"> 
    <div class="inner"> 
     Why am I not overlapping? 
    </div> 
</div>

CSS：

div{ 
    border: solid 1px red; 
} 
.container{ 
    height:300px; 
    position: relative; 
    overflow: visible; 
    z-index: 1; 
    background-color:black; 
    color: blue;  
} 

.inner{ 
    background-color:yellow; 
    overflow:hidden; 
    /*overflow:visible;*/ <--This would work 
    text-align: right; 

} 

.floating{ 
    color:black; 
    width:100px; 
    height:100px; 
    background-color:green; 
    float:right; 
}

來源

2013-02-28 Nick

'overflow：hidden;'導致浮動元素清除，就像'clear：both;'會一樣。這可能與它有關。我不確定你想要達到什麼目的，但是你輸入'爲什麼我不重疊？'在浮動盒子裏，但是當我打開你發佈的小提琴時，這正是它所做的。 [示例]（http://i.stack.imgur.com/Shfsk.jpg） – Korijn 2013-02-28 20:38:07

JSFiddle看起來很好。你使用的是什麼瀏覽器？ – 2013-02-28 20:47:42

謝謝！我需要* div.container的所有子元素重疊浮動元素。 div.inner的內容由第三方創建，我無法更改它。所以我試圖通過設置postion爲相對和z-index來解決這個問題。合理？ – Nick 2013-02-28 20:50:21

你試過絕對定位呢？因爲你浮動的DIV不在你想要重疊的同一個容器中，所以它將位於體外。此外，您沒有爲浮動的DIV設置z-index，因此它將在後面分層，因爲它按順序排在其他容器之前。

div{ 
border: solid 1px red; 
} 
.container{ 
height:300px; 
position: relative; 
overflow: visible; 
z-index: 1; 
background-color:black; 
color: blue;  
} 

.inner{ 
background-color:yellow; 
overflow:hidden; 
/*overflow:hidden;*/ 
text-align: right; 

} 

.floating{ 
color:black; 
width:100px; 
height:100px; 
background-color:green; 
/* float:right;*/ 
position:absolute; 
top:0px; 
right:0px; 
z-index:2; 
}

我不確定這是否是您想要完成的效果，但這會將第一個容器放置在頂部。

來源

2013-02-28 20:46:33

我別無選擇，只能刪除浮動並使圖像成爲絕對定位的元素。謝謝 – Nick 2013-02-28 21:07:57

你可以這樣做，但我不確定它是否適用於你的情況。

.inner{ 
    background-color:yellow; 
    position: absolute; 
    width:100%; 
    text-align: right; 
}

或者當你要覆蓋第三方樣式，但不希望編輯在第三方應用程序，您可以創建相同的CSS類在自己的樣式表，並迫使它通過重要的覆蓋第三方！例如：

float: none !important;

來源

2013-02-28 20:51:06 Obsidian

不幸的是，改變第三方元素的溢出會導致該工具出現問題。好的建議，但。謝謝 – Nick 2013-02-28 21:04:59

如何讓溢出div：隱藏重疊浮動div？

回答

相關問題