ホームページ > 記事 > ウェブフロントエンド > CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）
CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）
- 青灯夜游オリジナル
- 2018-09-07 11:13:153020ブラウズ
この記事では、CSS でposition 属性を使用して位置決め効果を実現する方法について説明します。 CSS における 4 つの配置方法の紹介 (例) は、必要な友人に参考にしていただけると幸いです。
CSS での位置決めの基本的な考え方はシンプルで、通常の位置、または親要素、別の要素、さらにはブラウザ ウィンドウ自体を基準にして要素のボックスを表示する場所を定義できます。 css 位置属性 を使用して位置決め効果を実現する方法から始めましょう。
1: 静的配置 (静的)
HTML 内の位置に従って要素の配置を決定するプロセス。デフォルトでは、要素は通常のフローに表示されます (上、下、左、右、または Z は無視されます)。インデックスステートメント)。要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のライン ボックスを作成します。この要素は位置を静的に設定する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(静态定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.static {
position: static;
border: 3px solid #007AFF;
}
</style>
</head>
<body>
<div class="box">
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</div>
</body>
</html>以下はレンダリングです:
2: 相対位置決め (relative)
相対位置決めは、通常のフロー位置決めモデルの一部とみなされます。位置決めされた要素の位置は、位置決めされた要素の位置と相対的です。通常のフローでは、上、左、下、右の移動にはすべて値を指定できます。相対的に配置された要素が移動されるかどうかに関係なく、要素は依然として元のページ領域を占有しており、z-index に設定できます。この要素を、ドキュメント フロー内の要素、またはドキュメント フローの外にあるがこの要素よりも小さい z-index 値を持つ要素と比較して、ユーザーの視線に近づけます。相対配置の最大の役割は、この要素の左上隅を基準とした要素の絶対配置を実現することです。この要素は位置を相対に設定する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(相对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.box1{
background-color: red;
width:100px;
height:100px;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background-color: blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>position: relative;</h2>
<div class="box1">正常位置的盒子</div>
<div class="box2">相对于其正常位置向左移动的盒子</div>
<div class="box3">相对于其正常位置向右移动的盒子</div>
</div>
</body>
</html>以下はレンダリングです:
相対的に配置された要素は、絶対的に配置された要素のコンテナ ブロックとしてよく使用されます。
その3: 絶対配置(absolute)
絶対配置を割り当てられた要素を通常のフロー内の位置からドラッグし、最も近い要素を基準として左、右、上、下などの属性を使用します 配置設定を持つ親要素は次のとおりです絶対配置 要素の親に配置属性が設定されていない場合は、body 要素の左上隅を基準に配置されます。絶対的に配置された要素はスタックでき、スタック順序は z-index 属性によって制御できます。z-index 値は、大きい方が上になる単位のない整数であり、負の値を持つことができます。
絶対配置の配置方法: 親要素が、position:relative、position:absolute、position:fixed など、静的以外の位置を設定する場合、その親要素に対して相対的に配置され、その位置が左に渡されます。 、top、right、bottom 属性は、その親要素に位置設定が設定されていない場合、その親要素に位置設定が設定されているかどうかに依存することを規定しています。それでも設定されていない場合は、上位レベルの祖先要素に進みます。つまり、配置は、静的配置以外の配置を持つ最初の祖先要素を基準とします。すべての祖先要素が上記の 3 つの配置のいずれかを持たない場合、ドキュメント本体を基準に配置されます。 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(绝对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
}
.div1 {
width: 150px;
height: 150px;
background: yellow;
}
.div2 {
width: 150px;
height: 150px;
background: red;
top: 150px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2>position: absolute;</h2>
<div class="div1">
父元素
<div class="div2">子元素</div>
</div>
</div>
</body>
</html>以下はレンダリングです:
4. 固定配置 (固定)
固定配置は絶対配置と似ていますが、ブラウザ ウィンドウを基準にして配置され、スクロール バーと一緒にスクロールしません。 。
固定位置の最も一般的な使用法の 1 つは、マージン、境界線、またはパディングを使用せずに、ページ上に固定ヘッダー、固定フッター、または固定サイドバーを作成することです。この要素は位置を固定に設定する必要があります。
以上は、CSS で位置属性を使用して位置決め効果を実現する方法についての具体的な紹介です。これが必要な友人に役立つことを願っています。
以上がCSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。