css3の配置にはいくつかの種類があります-フロントエンドQ&A-php.cn

css3の配置にはいくつかの種類があります

青灯夜游

リリース： 2021-12-15 11:07:41

オリジナル

1878 人が閲覧しました

css3 の配置には 4 つのタイプがあります: 1. 相対 (相対配置)、オフセット参照要素は要素自体であり、要素がドキュメントフローから切り離されることはありません; 2. 絶対 (絶対)位置決め)、最も近い親要素位置決め要素は基準座標です; 3. 固定 (固定位置決め); 4. 静的 (静的位置決め)。

css3の配置にはいくつかの種類があります

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

CSS の位置決めには 4 つの異なるタイプがあります。位置の値は次のとおりです: static、relative、absolute、fixed

1. Relative (相対位置決め)

relative相対位置決めのためのオフセット参照要素は要素そのものであり、要素のエラーは発生しません。ドキュメントフローから抜け出すため。要素の初期位置が占めるスペースは保持されます。相対的に配置された要素は、絶対的に配置された要素の親要素としてよく使用されます。また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます

##コード例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
.rel{
	width: 200px;
	height:200px;
	background: red;
	position: relative;
	top:200px;
	left: 200px;
}
</style>
</head>
<body>
	<p class="rel">相对定位</p>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>

</body>
</html>

ログイン後にコピー

レンダリング:

css3の配置にはいくつかの種類があります

##rel 要素は偏って移動しますが、テキストは元の位置を埋めません。相対的に配置された要素がドキュメントフローから切り離されず、元の位置が保持されたままであることがわかります。

##2. Absolute (絶対位置決め)

Absolute配置要素

は、親要素内で最も近い配置要素を参照座標として取得します。絶対配置要素の親要素が配置を使用しない場合、絶対配置要素の参照オブジェクトは、要素は html, 要素はドキュメントフローから抜け出します。あたかもがドキュメントストリームから削除されたかのようです。 ##また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます##コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

.abs{
width: 200px;
height:200px;
background: red;
position: absolute;
top: 200px;
left: 200px;
}
 
</style>
</head>
<body>
<div>绝对定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>

ログイン後にコピー

レンダリング:

噂を払拭させてください。

絶対配置された要素の親要素が配置を使用しない場合、この絶対配置された要素の参照オブジェクトは誰ですか?それが本文であるという人もいますし、ドキュメントであるという人もいます。実際、どちらでもありません。MDN の概要を読んだ後、

は最初の包含ブロックを参照として受け取ります。そのサイズはビューポートと一致しますが、ビューポートによって生成されるのではなく、ルート要素

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
  margin:0px;
  padding:0px;
}
body {
  height:1500px;
}
div {
  width:100px;
  height:100px;
  background:green;
  position:absolute;
  bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

ログイン後にコピー

インスタンスのレンダリング:

参照オブジェクトが body またはドキュメントの場合、p 要素はページの最下部に配置する必要があります。ここにはスクロールバーがあり、要素はビューポートの最下部にのみ配置されることに注意してください。

css3の配置にはいくつかの種類があります #3、

固定 (

固定位置

)変位の基準座標は視覚ウィンドウであり、ドキュメントフローから切り離すために固定要素が使用されます。また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fix{
width:200px;
height: 200px;
background: red;
position: fixed;
top: 200px;
left: 200px;
}
 
</style>
</head>
<body>
<div>固定定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
 
 
</body>
</html>

ログイン後にコピー

Exampleレンダリング:

固定固定位置と絶対位置は似ています。どちらも要素の移動を引き起こす可能性があります。上記は固定位置を示しています。これまでのところ、絶対位置の違いを確認するには、テキストにさらにテキストを追加して、ブラウザにスクロールバーを生成させます。スクロールバーをドラッグして違いを確認してください。固定配置要素は、その名前が示すように、特定の位置に固定できます。絶対位置指定では、スクロールバーのスクロールに応じて位置が移動します。

4. static (静的配置)

デフォルト値、要素ボックスは通常どおり生成され、左上、右下のオフセットプロパティはその静的配置に影響しません。通常表示

(学習ビデオ共有: css ビデオチュートリアル)

以上がcss3の配置にはいくつかの種類がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。