CSS の z-index_html/css_WEB-ITnose
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に関する個人的な知識も書いていきたいと思います。異なる意見がある場合は、遠慮なく意見を表明してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7360
15
1628
14
1353
52
1265
25
1214
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
