CSSのz-indexの詳しい解説(1)-CSSチュートリアル-php.cn

CSSのz-indexの詳しい解説(1)

零下一度

リリース： 2017-05-12 14:16:13

オリジナル

1586 人が閲覧しました

私たちが一般的に使用する CSS では、z-index attribute はノードの重なり順を設定するものであると同時に、私たちは常に理解しています。積み重ねる順序が明確ではないため、日常のレイアウトに問題が発生します。以下に CSS における z-index についての個人的な理解を示します。間違っている場合は修正していただければ幸いです。中

float

: laft; と Float: Right; と Absolute、Relative、FIXED; をよく使用しますが、私自身のテストの結果、デフォルトではスタック順序がないことがわかりました。これは、HTML 内のタグの順序によって決まります。このため、誰もがそれが配置と配置の間の積み重ね順序であると誤解します。以下は、z-index コードの通常の使用例です:

位置決めにおける静的は標準的なフローなので、ここでは説明しません

3 つのボックスがあるとき

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>

ログイン後にコピー

固定を設定します、相対、絶対、それぞれの背景色は赤、青、緑です

HTML コード内のタグの位置順序を変更すると、ボックスが一番上に表示されることがわかります。もちろん、

html タグ

の順序を変更せずにそれを実行したい場合は、2 番目のメソッド z-index を使用できます。

z-index を追加するときは、これに注意する必要があります。 style には値があり、その値は重なり順にも影響します。スタイルの Z インデックス値が大きいほど、スタッキングレイヤーが高くなります。もちろん、Z インデックスは常に機能するわけではないことにも注意してください。

位置決めと位置決めの間の積み重ね、

フローティング

とフローティングの間の積み重ねなど、同じスタイルの場合に限り、ボックスが 2 つあり、1 つのボックスがフローティング要素で、もう 1 つが位置決め要素である場合、2 つのボックスはスタックされますこのとき、フローティングボックスを位置決めボックスの上に表示したいのですが、現時点では z-index を設定することはできません。

配置されたボックス自体の積み重ね順序は、フローティングボックスの積み重ね順序よりも高いため、現時点でこの問題を解決するには、フローティングボックスを配置されたボックスに置き換える必要があります。設定後に、z インデックスを設定できます。積み重ねる順番。以上は私の個人的な意見であり、今後ウェブに関する個人的な知識も書いていきたいと思います。異なる意見がある場合は、遠慮なく意見を表明してください。

【関連おすすめ】

無料のCSSオンラインビデオチュートリアル

3. php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSSのz-indexの詳しい解説(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。