4

CKEditに問題があります。このスクリーンショットにあるように、ツールバーはツールバーの上にある要素を通して表示されています。

ここに画像の説明を入力してください

ボタンはを介してグレー表示されます。opacity: 0.5これが削除されると、要素はposition: fixedツールバーの下に正しく配置されます。

ここに画像の説明を入力してください

影響を受けるブラウザ：
Chrome、Safari、Firefox、Internet Explorer 9

テスト不可能なブラウザ：
Internet Explorer 8（position: fixedページと一緒にスクロールするため、問題は表示されません）

他のブラウザはまだテストしていませんが、エンジンに依存しない問題のようです。

フローティング（固定）要素自体は不透明であり、ツールバーの子ではありません。しかし、透明な場合、透明なボタンはその上に浮かんでいます。ただし、不透明度が1に設定されている場合、それらはその下にとどまります。したがって、不透明度が要素のzレイヤーに影響を与えているように見えます。

JSFiddle：
http ://jsfiddle.net/7gSyB/-不透明な赤で表示されているにもかかわらず、ツールバーのテストを通して表示されるボタンの「Bla」を確認できます。
http://jsfiddle.net/7gSyB/1/-「Bla」を不透明に切り替え、上部の要素の後ろにとどまります。

なぜこれが起こっているのか、そしてそれを期待どおりに機能させる方法（透明な要素は透明であってもフローティング要素の下にとどまる）のアイデアはありますか？

4

1 に答える 1

8

CSS3カラードキュメントから：

実装は、不透明度が1未満の要素に対して、新しいスタッキングコンテキストを作成する必要があります。不透明度が1未満の要素が配置されていない場合、実装は、親スタッキングコンテキスト内で、作成するレイヤーを同じスタック順序でペイントする必要があります。とで配置された要素の場合に使用されz-index: 0ます opacity: 1

したがって、#button { opacity:.5 }要素はで新しいスタッキングコンテキストを取得しz-index:0、絶対位置#toolbarにあるものも（デフォルト）になりますz-index:0。したがって、DOM内の要素の順序により、ブラウザはツールバーの上部にボタンを描画します。これは、ボタンが文字通り、ページの順序の上から下のツールバー要素の後にあるためです。

修正はz-index、たとえば、＃toolbarに高い（0より大きい）を追加することです。

HTML

<div id="toolbar">Test Test Test</div>
<div id="button">Blah</div>

CSS

#toolbar {
  background: red;
  position: fixed;
  z-index:1; /* if this is 0 then the button will be painted over the toolbar */
}

#button {
  opacity: 0.5;
  background-color:#000;
  height:42px;
  width:84px;
  color:#fff;
  font-size:42px;
}​
于 2012-07-17T09:36:26.010 に答える