1

サードパーティのインライン HTML エディター (CKEditor) が使用されているサイトで作業しています。相対的に配置された DIV にラップされたエディター コントロールがあり、可視スタックの一番上に配置される z-index があります。問題は、一部のページで右側に浮いている (float: right) 画像があることです。一部の CKEditor スタイルでは、要素のオーバーフロー プロパティが非表示 (オーバーフロー: 非表示) に設定されています。

したがって、含まれている DIV の z-index はフローティング画像よりも大きくなっていますが、CKEditor 要素は画像の上にオーバーフローしていません。これにより、エディターの右上隅が切り取られたように見える結果が作成されます。

CKEditor スタイルを編集せずにこれを回避する方法はありますか? このシナリオの例をチェックしてください:

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 をフローティングしているため、ボディ自体の外側に配置されます。また、float 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 に答える