CSS 位置決め属性の詳細な紹介 (例付き)

前書き: CSS を使用してページをレイアウトし、美しくするプロセスでは、position 属性がよく使用されます。そこで次に、position属性について詳しく紹介していきます。

推奨ビデオ チュートリアル: css ビデオ チュートリアル

まず、HTML ファイルを作成し、css を使用して複数行のコンテンツを垂直方向の中央揃えにします。

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

次に、レイアウトと植字に CSS を使用します:

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

position 属性:

一、静的位置決め/従来型位置決め/自然な位置決め static

#機能: 自然な流れで要素を配置します

#機能:

1、上、下、左、右、または z-index 宣言を無視します。

2、2 つの隣接する要素にマージンが設定されている場合、最後の外側マージン Margin = 2 つのマージンのうち最大の

3、幅と高さの値が固定された要素。左右のマージンが自動に設定されている場合、左右のマージンは自動的に拡張されて全体を占めます。残りの幅を指定すると、ブロックが水平方向に中央に配置されます。

2. 相対位置決め相対

関数: 要素を位置決め可能な祖先要素にします。

機能 :

1、相対的な位置決めに上/右/下/左/Z インデックスを使用できます。相対要素は自然にフロー内の位置

2、自然なフロー内で相対的に配置された要素の位置は保持されます

3、任意の要素をset これは相対的であり、その絶対位置にある子孫は、それに対して相対的に絶対位置を置くことができます。

4 浮動要素はオフセットできます (t/r/b の設定の問題を解決するため)。 2 つの浮動要素の場合) /l 無効な問題)、それらの重なり順を制御します。

3. 絶対配置absolute

関数: 要素を切り離します。自然な流れから

特長:

1、自然な流れからの脱却

##2 、サイズのパーセンテージ比率を設定します。これは、最も近い配置可能な祖先要素です。

3。lrtb が 0 に設定されている場合、最も近い配置可能な祖先要素 (派生) のすべての側面に位置合わせされます。水平方向と垂直方向のセンタリングのトリックから)

4. 最近の位置決め可能な祖先要素がない場合、それは位置決め可能な祖先要素とみなされます。 5、z-index は重なり順を制御できます

4. 固定位置固定

関数: 絶対位置と同様です

機能:

1、ブラウザのビューポートを基準とした位置決め

2、固定位置の要素は機能しません。ビューポートのスクロールに合わせてスクロールします

3、absolue の特性を継承します

#位置を使用して子要素の垂直方向の中央揃えを実現します

<div class="wrap">
    <div class=""content></div>
</div>

.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

以上がCSS 位置決め属性の詳細な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。