如何让溢出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？

回答

相关问题