1

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

因此，尽管我包含的 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;
}
4

2 回答 2

1

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

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

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

float: none !important;
于 2013-02-28T20:51:06.900 回答
0

您是否尝试过绝对定位？因为您浮动的 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-28T20:46:33.970 回答