ホームページ > 記事 > ウェブフロントエンド > CSSの位置決めとは何ですか
CSSの位置決めとは何ですか
- 藏色散人オリジナル
- 2021-04-13 09:08:263263ブラウズ
CSS の配置には、1. static (静的配置を意味します)、2.relative (相対配置を意味します)、3.Absolute (絶対配置を意味します)、4.fixed (固定配置を意味します) が含まれます。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS Positioning プロパティを使用すると、要素を配置できます。 CSS は、列状のレイアウトを作成したり、レイアウトの一部を別の部分に重ねたり、長年複数のテーブルを使用する必要が多かったタスクを実行したりできる、配置用のプロパティを提供します。
CSS 配置のいくつかの方法:
1. static (静的配置):
デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。前回のエッセイを参照してください。
2.相対 (相対配置):
相対として配置された要素は通常のドキュメント フローから分離されていますが、ドキュメント フロー内の位置は依然として存在しますが、視覚的にはドキュメント フローとは異なります。元の位置に移動します。
上、下、左、右の設定により、通常の (元の) 位置を基準とした相対位置。階層的なグレーディングは、z-index を通じて実行できます。
.static1{
height:80px;
background-color: red;
}
.relative{
height:80px;
position:relative;
top:40px;
left:40px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="relative"></div>
<div class="static2"></div>
</body>3. Absolute (絶対配置): 絶対配置要素を生成し、静的配置以外の最初の親要素を基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
絶対として位置付けられたレイヤーは、通常のドキュメント フローから切り離されますが、相対との違いは、そのレイヤーが通常のフロー内に存在しなくなることです。
この属性に関して、常に誤解を招く情報を与える人がいます。 Position 属性を絶対に設定すると、常にブラウザ ウィンドウに従って配置されると言われていますが、これは実際には間違いです。実はこれが固定資産の特徴なのです。
<style type="text/css">
.static1{
height:80px;
background-color: red;
}
.father{
height:100px;
background-color: pink;
position:relative;
left:20px;
}
.relative{
height:80px;
width:80px;
position:absolute;
top:10px;
left:10px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>4. 固定 (固定配置): 絶対配置の要素を生成し、ブラウザ ウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
<style type="text/css">
.static1{
height:80px;
background-color: red;
}
.father{
height:100px;
width:300px;
background-color: pink;
left:100px;
top:100px;
}
.relative{
height:80px;
width:80px;
position:fixed;
left:20px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>【推奨学習: css ビデオ チュートリアル 】
以上がCSSの位置決めとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。