ホームページ > 記事 > ウェブフロントエンド > CSSでのrelativeの使用法は何ですか
CSSでのrelativeの使用法は何ですか
- 醉折花枝作酒筹オリジナル
- 2021-05-21 17:26:485647ブラウズ
CSS では、relative の使用法は「位置:相対」です。 Relative は相対的な配置を表します。要素が相対的に配置されている場合、要素はその位置に表示されます。垂直または水平の位置を設定して、要素を開始点に対して「相対的に」移動できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
まず、相対位置決めの概念を簡単に見てみましょう
W3C の定義によると、相対位置決めは非常に理解しやすい概念であることがわかります。要素が相対的に配置されている場合は、その位置に表示されます。その後、垂直または水平位置を設定することで、要素をその原点に対して「相対的に」移動できます。
つまり、相対配置に設定された要素ボックスは、一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。
CSS 相対 (相対) 配置の概念を読んだ後、relative の使用法について詳しく話しましょう
私たちは皆、CSS で相対配置を次のように使用します。 :relative;
例:
<html>
<head>
<style type="text/css">
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>効果:
上記の例を読んだ後、相対 A がおおよそわかります。位置決めの簡単な使用法について説明しましたが、相対位置決めの他の使用法を見てみましょう。
絶対に対する相対の制限的影響
絶対配置は、位置属性が静的属性ではない最初の祖先要素を配置することを知っています。相対または固定配置がない場合は、絶対追加先頭を指定してください。 /left、right/bottom およびその他の属性によってオフセットが発生する可能性がありますが、position:relative が親要素に追加されている場合、絶対オフセット機能は親要素によって制限されます。
relative のオーバーフローに対する制限効果
例を見てみましょう:
<html>
<head>
<style type="text/css">
.box {
overflow: hidden;
width: 50px;
height: 50px;
background-color: #dddddd;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: #cd0000;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<div class="box" style="position: relative">
<div class="son"></div>
</div>
</body>
</html>効果:
この中でこの例では、.box の幅と高さは両方とも 50 ピクセルですが、.son 要素の幅と高さは両方とも 100 ピクセルです。.box 要素には overflow:hidden が設定されていますが、それでも .son 要素のサイズを制限することはできませんその幅と高さは両方とも 100px ですが、.box で相対位置属性を設定すると、.son 要素の幅と高さは 50px になります。
階層 z-index に対する相対の制限効果
ページ内の 2 つの絶対クラスには、異なる Z-インデックスがあり、独自のレベルがあります。これら 2 つの絶対クラスの親クラスが相対クラスを持つ場合、この時点では、それらのレベルは親クラスの相対的な z-index に依存します。
上記はこの記事の全内容です。CSS の相対位置の詳細については、CSS ビデオ チュートリアルに従ってさらに学習してください。
推奨学習: css ビデオ チュートリアル
以上がCSSでのrelativeの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。