ホームページ > 記事 > ウェブフロントエンド > CSS の z-index_html/css_WEB-ITnose
CSS の z-index_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:52:431307ブラウズ
Z-index
一般的に使用される CSS では、z-index 属性 はノードのスタック順序を設定するものです。これが z- の共通の理解です。同時に、重なり順の概念については常に曖昧であり、通常のレイアウトではいくつかの問題が発生します。以下に CSS における z-index についての個人的な理解を示します。間違っている場合は修正していただければ幸いです。
CSS レイアウトでは、位置指定に float:laft; と float:right; が使用されることがよくあります。配置と配置自体には重なり順がありますが、テストした結果、デフォルトでは重なり順が存在しないことがわかりました。これは、HTML 内のタグの順序によってのみ引き起こされ、それが重なり順であると誤解されます。のポジショニングとポジショニングの間。
3 つのボックスがある場合
もちろん、HTML コード内のタグの位置順序を変更すると、そのボックスがスタックの一番上に表示されることがわかります。 HTML タグの順序を変更しない場合は、2 番目のメソッド z-index を使用できます。
z-index を追加するときは、このスタイルには値があり、その値はスタックにも影響する可能性があることに注意してください。注文。
配置と配置の間のスタック、フローティングとフローティングの間のスタックなど、同じスタイルでのみ、ボックスが 2 つある場合、1 つのボックスがフローティング要素で、もう 1 つが位置決め要素である場合、ボックスが 2 つ発生します。スタッキング。この時点では、フローティング ボックスを位置決めボックスの上に表示したいのですが、それができません。現時点では、z-index の設定は役に立ちません。
div { width: 100px; height: 100px; color: white; float: left; }.div1 { position: fixed; background-color: red; }.div2 { background-color: blue; position: relative; }.div3 { background-color: green; position: absolute; } </style></head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></body></html> 配置されたボックス自体の重なり順はフローティング ボックスの重なり順よりも高いため、この時点でこの問題を解決するには、設定後にフローティング ボックスを配置されたボックスに置き換える必要があります。重ね順を設定します。
以上は私の個人的な意見であり、今後Webに関する個人的な知識も書いていきたいと思います。異なる意見がある場合は、遠慮なく意見を表明してください。