CSSのposition属性の使い方を詳しく解説
この記事ではCSSにおけるposition属性の使い方や分類、使用効果の表示について紹介していますので、これからCSSを勉強する友人の参考になれば幸いです！
#CSS でのposition 属性の使用法の詳細な説明
1. Position 属性の役割は何ですか?
CSS 位置プロパティは、ドキュメント内で要素を配置する方法を指定するために使用されます。 top、right、bottom、left 属性によって、要素の最終的な位置が決まります。 (MDN 定義)。 (推奨学習:CSS チュートリアル )
2. ポジションの分類は何ですか?
1、静的 通常のレイアウト動作、ドキュメントの通常のフローにおける要素の現在のレイアウト位置。現時点では、top、right、bottom、left、および z-index プロパティは効果がありません。 順位は変わりません。 2,相対このキーワードでは、まず位置決めが追加されていないときの位置に要素が配置され、その後ページレイアウトを変更せずに要素の位置が調整されます(したがって、要素は位置が追加されない場所に配置されます)。ターゲティングを追加する場合は、場所を空白のままにしておきます)。 Position:relative は、table-*-group、table-row、table-column、table-cell、table-caption 要素には無効です。 それ自身の位置を基準としたオフセット。 3. Absolute要素用のスペースを予約せず、最も近い非静的に配置された祖先要素に対する相対的な要素のオフセットを指定することによって、要素の位置を決定します。絶対的に配置された要素にはマージンを設定でき、他のマージンとマージされません。 この要素が存在しなかったかのように、要素のオフセットは、この要素の非静的祖先要素に基づいて決定されます。 4、固定要素用のスペースを予約しませんが、画面ビューポート (ビューポート) を基準とした相対位置を指定することで要素の位置を指定します。画面がスクロールしても要素の位置は変わりません。印刷時、要素は各ページの固定位置に表示されます。固定属性は、新しいスタッキング コンテキストを作成します。要素の祖先のtransform属性がnone以外の場合、コンテナはビューポートからその祖先に変更されます。 IE の下位バージョンには互換性がありません。 5、スティッキー ボックスの位置は、通常のフロー (これを通常のフローの位置と呼びます) に従って計算され、フロー ルート (BFC) および包含ブロックを基準にして計算されます。 (最も近いブロックレベルの祖先)。すべての場合 (位置決めされた要素がテーブルの場合でも)、この要素の位置決めは後続の要素に影響を与えません。要素 B が固定配置されている場合、後続の要素の位置は、配置されていないときの B の位置によって決まります。 Position: Sticky は、テーブル要素に対するposition:relativeと同じ効果があります。 同時に、sticky には次の問題があります: 1. Sticky は BFC をトリガーしません。 2. スタイル シートの z-index が無効です。インラインでの書き方は有効です。 3. スティッキーはコンテナーに関連しているため、スティッキー機能はそれが含まれているコンテナー内でのみ有効になります。実際の使用では、ボディを高さ: 100% に設定すると、粘着要素は特定の位置で停止するため、この点が強調されます。3. テスト コード
テスト コードの公開コードは次のとおりです:<html html>
<head>
<meta charset="utf-8">
<title>position</title>
</head>
<style>
.main-app{
display: flex;
justify-content: center;
align-items: center;
}
.app-container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#the-box{
position: static;
/* position: relative;
top:100px;
left:200px; */
}
.sub-box {
width: 50px;
height: 50px;
}
</style>
<body>
<div class="main-app">
<div class="app-container">
<div class="sub-box" style="background: gray;"></div>
<div id="the-box" class="sub-box" style="background: green;"></div>
<div class="sub-box" style="background: yellow;"></div>
<div class="sub-box" style="background: red;"></div>
</div>
</div>
</body>
</html>2 番目の要素をテスト オブジェクトとして選択しました。今回、テスト環境はchrome 75バージョンです。 1、静的#the-box{
position: static;
}結果: 通常のドキュメント フロー表示
#the-box{
position: relative;
top:100px;
left:200px;
} 結果: 
#the-box{
position: absolute;
top: 100px;
left: 200px;
}結果: 
.app-container {
width: 100%;
height: 3000px;
display: flex;
justify-content: center;
align-items: center;
}
#the-box{
position: sticky;
top: 100px;
}結果:
#the-box{
position: fixed;
top: 100px;
left: 200px;
}結果:
position 属性の値が親要素から継承されることを指定します。
7、initial
initial キーワードは、CSS プロパティをデフォルト値に設定するために使用され、任意の CSS スタイルに適用できます。 (IE はこのキーワードをサポートしていません)
8, unset
名前が示すように、unset キーワードは単に設定されていないことを意味します。実際には、キーワード「initial」と「inherit」の組み合わせです。
CSS プロパティに unset を設定すると:
プロパティがデフォルトの継承プロパティである場合、値は継承と同等になります
プロパティが非継承の場合プロパティの値、initial
9、revert
に相当する値はまだ仕様に含まれていません。
以上がCSSのposition属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSを使用してTextareaをスタイリングする方法
Sep 16, 2025 am 07:00 AM
まず、幅、高さ、マージン、境界、フォント、色などの基本的なスタイルを設定します。 2。インタラクティブなフィードバックを強化して：Hoverおよび：フォーカス状態。 3。サイズ属性を使用して、サイズの動作を制御します。 4。::プレースホルダーの擬似要素を使用して、プレースホルダーテキストをスタイリングします。 5.レスポンシブデザインを使用して、デバイス間の可用性を確保します。 6.相関ラベル、色のコントラスト、フォーカスの概要に注意を払って、アクセシビリティを確保し、最終的に美しく機能的なテキストレアスタイルを実現します。
純粋なCSSを使用してドロップダウンメニューを作成する方法
Sep 20, 2025 am 02:19 AM
HTMLとCSSを使用して、JavaScriptなしでドロップダウンメニューを作成します。 2。：Hover Pseudo-Classを介してSubmenuディスプレイをトリガーします。 3.ネストされたリストを使用して構造を構築し、CSSに非表示および吊り下げのあるディスプレイ効果を設定します。 4。視覚的なエクスペリエンスを向上させるために、トランジションアニメーションを追加できます。
画像がCSSで伸びたり縮小したりするのを防ぐ方法
Sep 21, 2025 am 12:04 AM
useObject-fitormax-widthwithheight：autotopreventimagedistortion; object-fitcontrolshowimagesfillcontainersは、asspectratios、andmax-width：100％; height：autoensuressivescaling withoutwithoutstretching。
CSSでポインターイベントプロパティを使用する方法
Sep 17, 2025 am 07:30 AM
pointer-events-eventsporpertyincssconstrolswhethernelementcanbetheTarget ofpointerevents.1.usepointer-events：nonetodisable interactionsionsionsionsionslikeclicksoversoverseepingtheelementはviseallyvisible.2.applyittooclaallowcliclowcliclavioturtuntowontuntuntointuentointyonelemenmen
CSSでボックスシャドウエフェクトを追加する方法
Sep 20, 2025 am 12:23 AM
usethebox-shadowpropertytoaddropshadows.definehorizontalandaldverticalOffsets、blur、spread、color、andoptionalinsetforinnershadows.multipleshadowsarecomma-separated.example：box-shadow：5px10px8pxrgba（0,0,0,0.3）;
CSSにグラデーションの背景を追加する方法
Sep 16, 2025 am 05:30 AM
CSS勾配の背景を追加するには、背景または背景イメージ属性を使用して、linear-gradient（）、radial-gradient（）などの関数と協力します。最初に勾配の種類を選択し、方向と色を設定すると、線形勾配（Toright、＃FF7E5F、＃FEB47B）などの色のドッキングポイント、形状、サイズ、その他のパラメーターを介して細かく制御できます。
CSSでテキストに応答するようにする方法
Sep 15, 2025 am 05:48 AM
tomaketextresponsiveincss、userelivateunitslikerem、vw、andclamp（）withmediaqueries.1.replacefixedpixelswithremforconsistentscali ngbasedOnRootFontSize.2.USEVWFORFFRUIDSCALINGBUTCOMBINEWITHCALC（）ORCLAMP（）TOPREVENTEXTREMES.3.APPLYMEDAQUERIESATCOMMONBREAKPO
CSSで円形画像を作成する方法は？
Sep 15, 2025 am 05:33 AM
ボーダーラジウスを使用してください：50％を使用して、幅と高さの画像を円に変え、オブジェクトフィットとアスペクト比を組み合わせて形状と作物を確保し、境界、影、その他のスタイルを追加して視覚効果を高めます。
