CSSの相対配置と絶対配置について詳しく解説

CSS の相対位置と絶対位置
通常、要素の位置属性の値はデフォルトで静的です。これは、要素が通常のドキュメント フローに表示されることを意味します。このとき、左側と絶対位置を設定します。この要素の right 、bottom、top の offset 属性は効果がなく、たとえば、左マージンから 100px のオフセットを設定した場合、このステートメントは効果がありません。 。 z-index 属性は現時点では有効になりません。
つまり、通常、要素に位置属性を宣言しない場合、デフォルトで上記の状況になります。ただし、浮動小数点であるため、通常は実際に位置属性を設定する必要はありません。要素！
ただし、いくつかの特殊なケースでは、position 属性を使用する必要があるため、今日は、position 属性の相対値と絶対値について説明します
まず、相対的な位置決めについて話しましょう。
どうやって理解するの？要素の相対位置を設定すると、最初に、他の要素と同様に、この要素がドキュメント フロー内で表示されるべき場所に表示されます。次に、その要素の水平または垂直オフセットを設定して、要素が開始点に対して相対的に移動されます。ドキュメント フロー内の位置のポイント。注意すべき点の 1 つは、相対配置を使用する場合、要素がオフセットされていても、オフセットされる前のスペースを占有することです。ここで注意すべき点は、オフセットはマージンと同じではないということです。
下の図を見てみましょう: 上の図には 3 つの浮動ブロックがあります。2 番目のブロックは、相対的な位置に設定されています。 2 つのブロックも通常の文書フロー内にあります。
次に、ブロックのオフセットをposition:relative:left:50px;top:30pxで設定します。次に、その効果を見てみましょう:

この時点で、2番目のブロックがそれ自身のブロックに対して相対的に配置されていることがわかります。開始点はオフセットされていますが、元の位置スペースはまだ残っています (点線のボックスでマークされた場所)。オフセットを少し大きく設定して、元の位置を完全に残しておきます。位置 ドキュメント フロー内の位置はまだ存在しており、上に浮いている 3 番目のブロックによって埋められることはありません。
同時に、そのオフセットは、他のブロックをドキュメント フロー内の元の位置から押し出すことはありません。重複がある場合は、図に示すように、他のドキュメント フロー要素を押し出すのではなく、他のドキュメント フロー要素にオーバーラップします。すでに 3 番目のブロックをカバーしています。 z-index プロパティを設定して、重なり順を調整できます。
次に、絶対配置を見てみましょう:position:absolute
絶対配置が設定された要素はドキュメント フロー内のスペースを占有しません。要素が絶対配置で設定されている場合、ドキュメント フロー内のその位置は削除になります。この要素は行きますか？実際、相対配置を設定すると要素が浮動しますが、それらの違いは、相対配置ではドキュメント フロー内の要素の位置が削除されないことです。ドキュメント フローを作成し、ドキュメント フローから完全に抽出します。z-index を通じてスタック順序を設定できます。
では、絶対位置はどのように位置決めされるのでしょうか？まず、親要素が static 以外の位置 (position:relative、position:absolute、position:fixed など) を設定する場合、親要素に対して相対的に配置され、位置は left、top、right に渡されます。 、bottom 属性は、その親要素に位置設定が設定されていない場合、その親要素に位置設定が設定されているかどうかに応じて、上位レベルの祖先要素に続行することを規定します。簡単に言えば、その位置は、静的位置以外の位置 (position:relative など) を持つ最初の祖先要素が設定されている場合に相対的です。すべての祖先要素が上記の 3 つの位置のいずれかを持たない場合、その位置は
に相対的になります。
ドキュメント本体 位置を指定します (ウィンドウではなく、ウィンドウに対して相対的に配置されたものが固定されます)
[2 つの違いに注意してください。 は下部に添付されている図で理解できます。はウィンドウ本体の境界線です。 紫色の背景色はドキュメント本体の一部です]絶対に配置された要素は who を基準にして配置されます。これを「who」を参照オブジェクトと呼びます。見てみましょう上記の説明に基づいて、下の図を見てみましょう:

まず、絶対位置を使用せずにその効果を見てみましょう:

次に、2 番目のブロックの絶対位置を設定します:position:absolute、次にオフセットを設定します: left:150px;top:40px; すると、以下の図のようになります。オフセットを設定するときに、負の値を設定できます。
さて、相対位置と絶対位置を理解したところで、実際のケースにどのように適用すればよいでしょうか? まず、下の写真を見てみましょう:

上の写真では、ショッピング カートのチェックアウト ボタンの左上に小さな赤いブロックがあります。これは、ショッピング内の商品数を示すために使用されます。絶対位置決めを学ぶ前は、この小さな赤いブロックをどのように実現すればよいのかわからないかもしれませんが、絶対位置決めを学んだばかりなので、この問題はもう問題ではありません。
まずはこの背景画像を取得しましょう:

それから HTML を書きます:


155

ショッピング カートに移動してチェックしてください


上記の HTML コードのspan要素is ショッピング カート内の商品数を表示するために使用される小さな赤いブロックです。 a 要素はテキストの説明で、b 要素は右端の小さな三角形です。
CSS コードを見てみましょう:
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px Solid #eee ;padding -left:30px;position:relative;_padding-top:5px;_height:25px;}

.cart_btn スパン{background:url(../images/picA.png) no-repeat -36px -54px;padding-左: 7px;位置:絶対; 上:-12px;左:20px;}

.cart_btn スパン i{float:left;height:20px;background:url(../images/picA.png) no-repeat right- 25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-左: 15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color:transparent 透明 透明 #CCCCCC;border-style:dashed Dashed Dashed Solid;border-width:5px;height: 0 ;overflow : hidden;width: 0;}
上記の CSS コードでは、ショッピング カート アイコンを .cart_btn の背景として使用しています。つまり、その画像には 3 つのアイコンがあるということです。アイコンの要素はすべてこの画像を背景として使用していることがわかりましたが、ここでは以前に説明した背景の位置の問題を使用しています。読み方がわからない人は、前回の講義 11:
CSS の背景属性の詳細説明 背景 - 背景画像の使用

CSS のコンテンツの意味については、ここでは触れません。これらは CSS トライアングルを除いて基本的なものです。それでも理解していない場合は、前の記事を注意深く読んでいないはずです。また、本当に理解できない場合は、リファレンス マニュアルを確認してください
最後に、ブラウザでの効果を見てみましょう:



絶対的な位置決めは、ドキュメント本体を基準としています (ウィンドウ、位置決めではありません)ウィンドウに対する相対的な色は固定されています) [この 2 つの違いは、図を見ると理解できることに注意してください。赤い枠線 はウィンドウ本体の境界線であり、紫色の背景色はドキュメント本体
の部分です。 ] 上記は CSS の相対配置と絶対配置コンテンツの詳細な説明です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。