html5 位置決めには 5 種類があります: 1. 絶対位置決め (absolute)、2. 相対位置決め (relative)、3. 固定位置決め (fixed)、4. スティッキー位置決め (sticky)、5. 静的位置決め(静的))。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
html5 のいくつかの位置決めメソッド
position は、親ブロックを基準としたブロック レベルの要素の位置、およびそれ自体を基準としたブロック レベルの要素の位置を設定します。絶対配置(absolute)
機能:
親要素がない場合、参照オブジェクトはドキュメント全体です。- デフォルトでは、参照オブジェクトは位置決めされた親要素です。
- 絶対位置決めされた要素を追加すると、ドキュメント全体が分離されます。レイアウト スペース
- 絶対的に配置された要素はドキュメント フローからドラッグされ、left などの属性を使用した最も近い位置設定を持つ最も近い親要素に対して相対的に配置されます。 、右、上、下など。絶対配置の場合、要素の親が配置属性を設定していない場合は、body要素の左上隅を基準に配置されます。絶対的に配置された要素は積み重ねることができ、積み重ね順序は z-index 属性によって制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値をとることもできます。
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body> class="two" の div を の上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトが変更され、この要素の元の位置に空白スペースは残りません。
#2. 相対位置決め (相対とは幽体離脱のシーンに相当します)
特徴:
参照オブジェクトは独自のデフォルト位置です- スペースを占有します
- 参照オブジェクトは破棄されませんレイアウト フロー
-
#相対的に配置された要素は積み重ねることができず、左、右、上、下などの属性に基づいて通常のドキュメント フロー内でオフセットできます。 z-index 階層設計を使用することもできます。
<head> <style type="text/css"> .box { background: red; width: 100px; height: 100px; float: left; margin: 5px; } .two { position: relative; top: 50px; left: 50px; } </style> </head> <body> <div class="box" >One</div> <div class="box two" >Two</div> <div class="box" >Three</div> <div class="box">Four</div> </body> class="two" の div を元の位置の上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトは変更されませんが、この要素の元の位置に空白スペースが残ります。
3. 固定配置 (固定)
機能:
参照オブジェクトブラウザ ウィンドウの固定位置
固定位置は絶対位置と似ていますが、ブラウザ ウィンドウに対して相対的に配置され、スクロール バーと一緒にスクロールしません。
固定位置の最も一般的な使用法の 1 つは、マージン、境界線、またはパディングを使用せずに、ページ上に固定ヘッダー、固定フット、または固定サイドバーを作成することです。
要素をブラウザ ウィンドウの上下左右の中央に配置する方法:
方法 1:
position:fixed left:50%; top:50%; margin-left: -盒子宽度的一半 margin-top:-盒子高度的一半方法 2:
position:fixed; left:0; right:0 top:0 bottom:0 margin:auto
4. Sticky の配置 (sticky には互換性の問題があります)
機能:
これは、相対と固定
- ## ページがスクロール バーをトリガーしない場合、実行効果は位置: 相対的です。それ以外の場合、実行効果は位置: 固定 です。 # アプリケーションは次のとおりです: ページ天井
-
<!DOCTYPE html> <html> <meta charset="utf8"> <head> <style> section:first-child { height: 200px; background-color: lightgray; } section:nth-child(2) { height: 100px; background-color: orange; position: sticky; position: -webkit-sticky; top: 50px; } section:nth-child(3) { height: 300px; background-color: lightgray; } section:nth-child(4) { height: 100px; background-color: orange; position: sticky; position: -webkit-sticky; top: 150px; } section:last-child { height: 500px; background-color: darkgray; } </style> </head> <body> <section>SECTION-1</section> <section>SECTION-2</section> <section>SECTION-3</section> <section>SECTION-4</section> <section>SECTION-5</section> </body> </html> - 5. 静的配置 (静的デフォルト)
一般に、現在の要素の配置方法が静的であることを指定する必要はありません。これがデフォルトの配置方法であるためです。親要素から継承した位置決めシステムをオーバーライドする場合を除きます。 left 属性と top 属性は、マージンによって配置される静的属性には影響しません。
関連する推奨事項:「
html ビデオ チュートリアル」
以上がHTML5 のポジショニングにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
CSS IDS対クラス：アクセシビリティに適しているのはどれですか？May 10, 2025 am 12:02 AMclassesarebetterforaccesibility inwebdevelopment.1）ClassscanbeappliedTomultipleements、sunsistentStylesandbehaviorsを保証します
CSS：クラスセレクターとIDセレクターの違いを理解するMay 09, 2025 pm 06:13 PMclassSeLectorEreusableformultipleElements、whiledselectorectorsareuniqueandusedonceperpage.1）クラスは、byperiod（。）、areideal forstylingmultipleementslikebuttons.2）、ids（＃）、aerpectforuniqueelementslikeanivigationmenu.3）idshsheaveavehe.3）を示します
CSSスタイリング：クラスセレクターとIDセレクターの選択May 09, 2025 pm 06:09 PMCSSスタイルでは、プロジェクトの要件に従ってクラスセレクターまたはIDセレクターを選択する必要があります。1）クラスセレクターは再利用に適しており、同じスタイルの複数の要素に適しています。 2）IDセレクターは一意の要素に適しており、優先度が高いが、メンテナンスの困難を避けるためには注意して使用する必要があります。
HTML5：制限May 09, 2025 pm 05:57 PMhtml5hasseverallimitationsincludingluding foradvancedgraphics、basicformvalidation、cross-browsercompatibilityissues、performurympacts、andsecurityconcerns.1）forcomplexgraphics、html5'scanvasisisuffish、resiclirarielikelikelikeweblorthree.2）i
CSS：あるスタイルは別のスタイルよりも優先されますか？May 09, 2025 pm 05:33 PMはい、ounestylecanhavemorepiritythananincssduetsificity andthecascade.1）dipitiesalityactsasascoringsystemwheremorepifictoreshavehigherpriolity.2）thecascadedededereminesstytyleapplication order、
HTML5仕様の重要な目標は何ですか？May 09, 2025 pm 05:25 PMtheSignificAntgoalsofhtml5aretoenhancemultimediasupport、Humanreadability、維持、Andensurebackwardcompativecivity.1）html5improvesmultimediawithnativeelementslikeand.2）ituseSseSseSseSseSseSseSseSseSseSmanticeForementionforementionforementionforementionforementionforemention foremantemention
Reactの限界は何ですか？May 02, 2025 am 12:26 AMraceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution
Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AMReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
Dreamweaver Mac版
ビジュアル Web 開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
