CSSでのposition属性の使用法は何ですか-CSSチュートリアル-php.cn

CSSでのposition属性の使用法は何ですか

coldplay.xixi

リリース： 2023-01-03 09:30:50

オリジナル

5281 人が閲覧しました

CSS でのposition 属性の使用: 1. 位置属性のない一般的なラベル要素は静的位置です; 2. 絶対的に位置する要素はドキュメントフローからドラッグされます; 3. 相対的に位置する要素は積み重ねることができません。 4. 固定配置は絶対配置と似ていますが、ブラウザウィンドウを基準にして配置され、スクロールバーと一緒にスクロールしません。

CSSでのposition属性の使用法は何ですか

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS でのposition 属性の使用:

1. 静的配置 (static)

一般的なラベル要素は追加されませんすべての位置決め属性は静的位置決めであり、ページ下部の標準フローに属します。

2. 絶対配置 (absolute)

絶対配置の要素はドキュメントフローからドラッグされ、左、右、上、下、およびその他の相対的な属性を使用します。最大位置。位置設定が設定されている最も近い親要素が絶対配置に使用されます。要素の親が位置属性を設定していない場合、body 要素の左上隅を基準に配置されます。絶対的に配置された要素は積み重ねることができ、積み重ね順序は z-index 属性によって制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値をとることもできます。

絶対配置の配置方法:

親要素が、position:relative、position:absolute、position:fixed など、静的以外の配置を設定する場合、相対配置になります。親要素に位置を指定します。位置は、left、top、right、bottom 属性によって指定されます。

親要素に位置設定が設定されていない場合は、その親要素の親要素に位置設定が設定されているかどうかによって決まります。位置決めセット。 ,

まだ存在しない場合は、上位レベルの祖先要素への推論を続行します。つまり、その位置決めは、静的位置決めセット以外の位置決めを持つ最初の祖先要素を基準としています。

If すべての祖先要素が上記の 3 つの位置のいずれかを持たない場合、それらはドキュメント本文を基準にして配置されます (ブラウザウィンドウを基準としてではなく、ウィンドウの位置を基準に固定されています)。

<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 ピクセルの位置に配置します。他の要素のレイアウトが変更され、この要素の元の位置に空白スペースは残りません。

3. 相対配置 (relative)

相対的に配置された要素は積み重ねることができません。通常のドキュメントフロー内で、左、右、上、下に基づいて位置をオフセットできます。底部とその他の属性。 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 ピクセルの位置に配置します。他の要素のレイアウトは変更されませんが、この要素の元の位置に空白スペースが残ります。

4. 固定配置 (固定)

固定配置は絶対配置と似ていますが、ブラウザウィンドウを基準にして配置され、スクロールバーに従いません。スクロール。

固定位置の最も一般的な使用法の 1 つは、マージン、境界線、またはパディングを使用せずに、ページ上に固定ヘッダー、固定フット、または固定サイドバーを作成することです。