ホームページ >ウェブフロントエンド >CSSチュートリアル >負のマージン値によって引き起こされる階層 (z-index) の問題

負のマージン値によって引き起こされる階層 (z-index) の問題

巴扎黑
巴扎黑オリジナル
2017-05-21 10:50:252179ブラウズ

この記事では主に、負のマージンによって引き起こされる階層 (z-index) 問題の解決策を紹介します。必要な友人はそれを参照してください。 まずこのコードを見てみましょう:


コードをコピーします

コードは次のとおりです:



スクリプト ホーム



IE6 と IE7 では、図に示すように、内側のコンテナーは外側のレイヤーで覆われます:

IE8 と ff では、図に示すように、外側のコンテナーは内側のレイヤーで覆われます:

本当にクレイジーです、IE8 に到達したい場合、外側のコンテナが内側の層で覆われていることの影響は、IE7 では内側の層のレイアウトをトリガーすることで解決できますが、IE6 ではこの問題を解決するには、position:relative を使用する必要があります。もちろん、position:relative 自体がレイアウトをトリガーできるため、position:relative も ie7 の問題を解決します。




コードを見てください: 代 コードをコピーします: 次のようなコード:

& lt; p style = "height: 100px; width: 200px; border: plain 1px black;" & gt;

& lt; ;p style="background-color:Red;margin-top: -5px;position:relative" mce_style="background-color:Red;margin-top: -5px;position:relative"> ;
スクリプトホーム

p>



もちろん、IE8 と FF で IE6 と IE7 の効果を実現したい場合は、外側の層に overflow: hidden を追加するだけです。コードを参照してください





コード

コードは次のとおりです:

p style="background- color:Red;margin-top: -5px;" mce_style="background-color :Red;margin-top: -5px;">

スクリプト ホーム /p>

以上が負のマージン値によって引き起こされる階層 (z-index) の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。