4

2枚の写真を添付し​​ました.1枚目は私が取り組んでいるwebappの「デスクトップ」を示してい<div/>ます<iframe/>. 2 番目の図に示すように、一部の要素の z-index に問題があります。

内部に数字が入った小さな赤い丸は、次のように定義されています。

.countComunicazioni {
    position: relative;
    background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
    height: 35px;
    width: 35px;
    color: #FFF;
    top: -105px;
    left: 120px;
    z-index: 0;
    font-weight: bold;
    display: none;
}
.countComunicazioni p {
    margin-top: -5px;
    padding-top: 10px;
}

マークアップは<div class="countComunicazioni"/>タグとその<p/>中のタグです。

また、Google Chrome V22 でも問題が発生するようになりました。z-index == 0 で、ダイアログの z-index > 1000 であっても、赤い丸で囲まれた数字が常に一番上に表示されます。

このバグ レポート ( http://code.google.com/p/chromium/issues/detail?id=144518 ) によると、この変更は意図的なものであるように思われます。私たちのもの。

この問題は、以前のバージョンの Google Chrome には存在しませんでした。Firefox V15 または Internet Explorer V9 にも存在し、すべてが問題になります。

この問題はどのように解決できますか? 私は CSS の専門家ではないので、これまでほとんど試したことがないことを認めなければなりません... また、ここで「正しい」のは誰でしょうか? 私たちのマークアップは間違っていますか、それとも Google Chrome の新しいレンダリング戦略に問題がありますか?

Web アプリ デスクトップ

ダイアログが開きました

編集

2 つの写真に示されている問題を解決できたようです。Web アプリから生成されたすべてのダイアログは、本文の一番上に配置された内部に<div/>配置position:fixedされています。今、div を一番下に移動しようとしましたページのレイアウトが正しく表示されるようになりました。

ただし、もう 1 つの問題があります。モーダル ダイアログを開くと、ダイアログとその下のコンテンツの間に作成されるはずの不透明なレイヤーが、実際にはその上に作成されます。新しいスクリーンショットを参照してください。

不透明なレイヤーが間違っているモーダル ダイアログ

この問題はどのように解決できますか? JavaScript を変更する必要がありますか、それとも jquery ui 自体の問題ですか?

4

1 に答える 1

5

chrome22+がz-indexを処理する方法が変更されていることに気づきました。私がここに書いていなかったこの素晴らしい説明をここでチェックしてください...

http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

基本的に私が理解しているのは、

position: fixed

独自のz-indexレイヤーでカウントされるようになったため、それに応じてページを調整する必要があります。

お役に立てば幸いです。

于 2012-09-27T01:13:28.687 に答える