web-dev-qa-db-ja.com

Google Chrome z-indexを考慮しない

タイトルどおり、Chromeは正しく機能していません。画面の左側にあるフォームフィールドをクリックすることはできません。これは一部のページ（ #left_outer divがコンテンツをオーバーレイしているようです。FirebugまたはChromeの開発ツールを介してcssを編集すると機能しますが、実際のcssを編集して更新すると機能しません。

何か案は？

リンク：

ありがとう！

cssgoogle-chromez-index
20
vulgarbulgar

通常、z-indexプロパティですが、期待どおりに機能していないため、position属性に関連しています。

z-indexが正しく機能するには、要素を「配置」する必要があります。つまり、position属性をabsolute、relative、またはfixedのいずれかに設定する必要があります。

要素は、position: absoluteおよびtop、left、right、bottomなど.

36
markt

参照するリンクがないと、問題が何であるかを確認するのが少し難しくなります。

ありますか z-index: -1;どこにでも（負の数はここでのキーです、数は関係ありません）？私は過去にこれがコンテナとの相互作用を無効にすることを発見しました。

幸運を！

4
Kate

Marktの回答（最初の回答を参照）はすばらしいものであり、これはz-indexプロパティの「定義」によるものです。
通常、Chromeの特定の問題は、コンテナの上部からのオーバーフロープロパティに関連しています。したがって、次の場合：

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

そしてスタイル：

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

実際には次のことが起こります（Chromeのみ、Firefoxは期待どおりに動作します）
'fixed-div' 遅れている 'first-container'、ただし 'fixed-div'とそのコンテナ（ 'second-container'）の両方のz-index値は「最初のコンテナ」より大きい。

これの理由はChrome常にオーバーフローを強制するコンテナ内の境界を強制するそれでも後続の1つにfixed位置。
そのためのねじれたロジックを見つけることができると思います...固定位置を使用する唯一の理由は「すべての上に」の動作を有効にするためです。
バグです...

4
Tomer

Chrome=のzIndexに奇妙な問題があり、何が機能するかを確認するためにposition属性をいじり続けました。しかし、機能しませんでした。私の場合、問題は変換属性です。変換属性がある場合は、それを無効にしてください。他のブラウザはそのようなもので正常に動作しますが、Chromeは別の方法で再生するようです。

これがお役に立てば幸いです。

2
Anoop Santhanam