ポジションの概要attribute_html/css_WEB-ITnose
position 属性は要素の配置タイプを指定します
この属性は、要素のレイアウトを確立するために使用される配置メカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。
| absolute 絶対配置 | 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 |
| fixed 固定配置 | ブラウザウィンドウを基準にして絶対配置された要素を生成します。 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 |
| relative 相対配置 | 通常の位置を基準にして相対的に配置された要素を生成します。 つまり、「left:20」は要素の左の位置に 20 ピクセルを追加します。 |
| 静的 | デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 |
| inherit | Position 属性の値を親要素から継承することを指定します。 |
画像をオーバーレイするために z-index とともに使用します。デフォルトの z-index は 0 です。値は小さいものから大きいものへと増加し、優先順位は増加します (つまり、表面上の要素が最も高い優先順位になります)
上記は W3C の位置定義から引用したものです
情報を探して調べた結果、以下の点をまとめました:
1. 静的、継承: そうですね、喜んで無視することにしました (汗!!!)。
2. 固定: ブラウザーの表示部分に対する相対的な配置 (ブラウザーに応じて)3. 相対的な配置 (要素自体の通常の位置に応じて)
4. : 位置属性が静的ではない最初の親要素を基準とした位置決め (これは実際には畳み込みであり、これは最初は理解できなかったことです。親要素に位置属性がない場合、または位置属性がすべて静的、体の位置に依存します)
もちろん、コンテンツ、パディング、ボーダーとマージンの四大王もあります。覚えておいてください、absolute は content+apdding (つまり、パディングが開始される位置) に基づいて配置されます
<html> <head> <style type="text/css"> .div1{ position: relative; border: 10px solid red; padding: 10px; width: 100px; height: 100px; background-color: green; background-clip: content-box; } .div2{ positon: absolute; width: 50px; height: 50px; background-color: yellow; left: 10px;//此处left会以padding开始定位 } </style> </head> <body> <div class='div1'>div1 <div class='div2'>div2</div> </div> </body></html>Rendering:
実験中に落とし穴が発見されました。 ！ ！ ！ ！ ！上記のコードで left を margin に変更するとどうなりますか?
属性が 1 つだけ変更されていますが、コードを添付しましょう:
1 <html> 2 <head> 3 <style type="text/css"> 4 .div1{ 5 position: relative; 6 border: 10px solid red; 7 padding: 10px; 8 width: 100px; 9 height: 100px;10 background-color: green;11 background-clip: content-box;12 }13 14 .div2{15 positon: absolute;16 width: 50px;17 height: 50px;18 background-color: yellow;19 margin: 10px;20 }21 </style>22 </head>23 24 <body>25 <div class='div1'>div126 <div class='div2'>div2</div>27 </div>28 </body>29 </html>まだレンダリング中です:
margin 属性は親要素のコンテンツに基づいています。
うーん、次回は騙されないでください。
ホット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）
ホットトピック
7465
15
1376
52
77
11
18
19
Python の dir() 関数: オブジェクトのプロパティとメソッドを表示する
Nov 18, 2023 pm 01:45 PM
Python の dir() 関数: オブジェクトのプロパティとメソッドを表示します。特定のコード サンプルが必要です。 要約: Python は強力で柔軟なプログラミング言語であり、その組み込み関数とツールは開発者に多くの便利な機能を提供します。非常に便利な関数の 1 つは dir() 関数です。これを使用すると、オブジェクトのプロパティとメソッドを表示できます。この記事では、 dir() 関数の使用法を紹介し、具体的なコード例を通じてその機能と使用法を示します。テキスト: Python の dir() 関数は組み込み関数です。
H5の位置属性の柔軟な応用スキル
Dec 27, 2023 pm 01:05 PM
H5 でposition 属性を柔軟に使用する方法. H5 開発では、要素の配置とレイアウトが関係することがよくあります。このとき、CSS の位置プロパティが機能します。 Position 属性は、相対配置、絶対配置、固定配置、スティッキー配置など、ページ上の要素の配置を制御できます。この記事では、H5開発においてposition属性を柔軟に活用する方法を詳しく紹介します。
CSS レイアウト プロパティの最適化のヒント: 位置スティッキーとフレックスボックス
Oct 20, 2023 pm 03:15 PM
CSS レイアウト属性の最適化のヒント:positionsticky と flexbox Web 開発において、レイアウトは非常に重要な側面です。優れたレイアウト構造により、ユーザー エクスペリエンスが向上し、ページがより美しく、ナビゲートしやすくなります。 CSS レイアウト プロパティは、この目標を達成するための鍵となります。この記事では、一般的に使用される 2 つの CSS レイアウト プロパティ最適化手法、positionsticky と flexbox を紹介し、具体的なコード例を示します。 1. ポジション
JavaScript における pageXOffset 属性の役割は何ですか?
Sep 16, 2023 am 09:17 AM
ウィンドウの左上隅からドキュメントがスクロールされるピクセルを取得する場合は、pageXoffset プロパティと pageYoffset プロパティを使用します。水平ピクセルには pageXoffset を使用します。例 次のコードを実行して、JavaScript で pageXOffset 属性を使用する方法を学習できます - ライブ デモンストレーション<!DOCTYPEhtml><html> <head> <style> &
CSSのbottom属性構文
Feb 21, 2024 pm 03:30 PM
CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます
h5の位置の使い方
Dec 26, 2023 pm 01:39 PM
H5 では、position 属性を使用して、CSS を通じて要素の位置を制御できます: 1. 相対位置、構文は「style="position:relative;」です。 2. 絶対位置、構文は「style="position:」です。 Absolute;" "; 3. 固定位置、構文は「style="position:fixed;」などです。
ハースストーンの絶望の糸の属性の紹介
Mar 20, 2024 pm 10:36 PM
絶望の糸はBlizzard Entertainmentの名作『ハースストーン』に登場するレアカードで、カードパック「ウィズベインのワークショップ」で入手できるチャンスがあります。 100/400の秘術ダストポイントを消費して、ノーマル/ゴールドバージョンを合成できます。ハースストーンの絶望の糸の属性の紹介: ウィズベインのワークショップ カード パックで確率で入手できるか、秘術の粉塵を通じて合成することもできます。レアリティ：レア 種類：呪文 クラス：デスナイト マナ：1 効果：すべてのミニオンに断末魔を与える：すべてのミニオンに1ダメージを与える
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
