この記事では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;
}ログイン後にコピー
結果:
通常のドキュメント フロー表示
2、相対
#the-box{
position: relative;
top:100px;
left:200px;
}ログイン後にコピー
結果:
設定された位置は元の位置からオフセットされますが、元の位置は保持されます。
3、絶対
#the-box{
position: absolute;
top: 100px;
left: 200px;
}ログイン後にコピー
結果:
親要素が非固定であるため、元の固定位置は他の要素によって占有されています。 static (flex) なので、現在の要素は親要素を基準にして設定された位置だけオフセットされます。
4. スティッキー
スティッキー配置を有効にするには、上、右、下、左の 4 つのしきい値のいずれかを指定する必要があります。それ以外の場合、動作は相対位置決めと同じです。
この機能は、ビューポート内の要素の位置を固定します。ページにスクロール軸がない場合、この機能は表示されません。このとき、ページが表示されるように親要素を少し変更します。スクロール軸付き。
.app-container {
width: 100%;
height: 3000px;
display: flex;
justify-content: center;
align-items: center;
}
#the-box{
position: sticky;
top: 100px;
}ログイン後にコピー
結果:
ページをスクロールし、要素が上から 100 ピクセルを超えている場合、ビューポートを基準とした現在の要素の位置は変更されません。この機能は、テーブルの固定ヘッダーとして使用できます。
5、fixed
は、IE7 より前のバージョンでは使用できません。実際、ブラウザ ウィンドウ内の要素の位置を固定するのと同じです。
#the-box{
position: fixed;
top: 100px;
left: 200px;
}ログイン後にコピー
結果:
スクロール軸をどのようにスクロールしても、要素の位置は常に同じままです。
6、継承
position 属性の値が親要素から継承されることを指定します。
7、initial
initial キーワードは、CSS プロパティをデフォルト値に設定するために使用され、任意の CSS スタイルに適用できます。 (IE はこのキーワードをサポートしていません)
8, unset
名前が示すように、unset キーワードは単に設定されていないことを意味します。実際には、キーワード「initial」と「inherit」の組み合わせです。
CSS プロパティに unset を設定すると:
プロパティがデフォルトの継承プロパティである場合、値は継承と同等になります
プロパティが非継承の場合プロパティの値、initial
9、revert
に相当する値はまだ仕様に含まれていません。
以上がCSSのposition属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
