Question

我正在使用第三方嵌入式HTML编辑器的网站（CKEditor）。我将编辑器控件包装在相对定位的DIV中，并且具有位于可见堆栈顶部的z-index。问题是在某些页面上有右侧浮动（浮动：右侧）的图像。一些CKEditor样式的设置元素溢出属性为隐藏（溢出：隐藏）。

因此虽然我的包含DIV的z索引比浮动图像大，但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;
}

Answer 1

你可以这样做，但我不确定它是否适用于你的情况。

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

或者，当您想要覆盖第三方样式但又不希望在第三方应用程序中编辑它们时，您可以在自己的样式表中重新创建相同的css类，并强制它使用重要内容覆盖第三方！例如：

float: none !important;

Answer 2

您是否尝试过绝对定位？因为您浮动的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;
}

我不确定这是否是您想要完成的效果，但这会将第一个容器置于顶部。

如何使用溢出来创建div：隐藏重叠浮动div？

2 个答案: