この記事では、css に関する関連知識を提供します。主に CSS 配置属性の相対配置に関連する問題を紹介します。相対配置とは、要素が移動することです。元の位置を基準として、要素フレームは次のように設定されます。相対位置が一定距離ずれるので見てみましょう。皆さんの参考になれば幸いです。
(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)
position:relative相対配置の詳細説明
相対配置とは、要素が移動するとき、元の位置を基準にして移動することを意味します。
相対位置決めの特徴:
元の位置に対して相対的に移動します(位置を移動する場合、基準点は元の位置になります)
標準ストリーム内の元の位置は引き続き占有され、後続のボックスは引き続きそれを標準ストリームとして扱います (標準から外れることなく、元の位置を保持し続けます)。したがって、相対位置決めは規格外ではなく、最も一般的な用途は絶対位置決めです。
相対配置に設定された要素ボックスは、一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。
CSS 相対位置決め
相対位置決めは、習得するのが非常に簡単な概念です。要素が相対的に配置されている場合は、その位置に表示されます。その後、垂直または水平位置を設定することで、要素をその原点に対して「相対的に」移動できます。
top が 20px に設定されている場合、ボックスは元の位置の上部から 20 ピクセル下になります。 left を 30 ピクセルに設定すると、要素の左側に 30 ピクセルのスペースが作成され、要素が右に移動します。
#box_relative { position: relative; left: 30px; top: 20px; }
以下に示すように:
相対配置を使用する場合、要素は移動されたかどうかに関係なく、元のスペースを占有することに注意してください。したがって、要素を移動すると、他のボックスが覆われてしまいます。
例は次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ margin:10px; font-size:12px; font-family:Arial; } .outside{ width:1000px; height:600px; background-color:#a9d6ff; border:1px dashed black; } .inside{ padding:10px; background-color:#fffcd3; border:1px dashed black; margin: 10px; } .inside1{ margin:10px; padding: 10px; background-color:#fffcd3; border:1px dashed black; /* 设置相对定位 ,相对点是当前div的原始位置的左上角*/ position: relative; /* 距离div的原始位置的左边框 */ left:20px; /* 距离div的原始位置的上边框 */ top:30px; /* right距离div的原始位置的右边框 bottom距离div的原始位置的下边框 */ } </style> </head> <body> <div class="outside"> <div class="inside">div1</div> <div class="inside1">div2</div> </div> </body> </html>
出力結果:
ドキュメントに対する相対位置の影響フロー
コード例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ margin:10px; font-size:12px; font-family:Arial; } .outside{ width:1000px; height:600px; background-color:#a9d6ff; border:1px dashed black; } .inside{ padding:10px; background-color:#fffcd3; border:1px dashed black; margin: 10px; position:relative; left:30px; top:30px; /* div1相对定位脱离了文档流, 但是后续的div还会认为div1是在没有相对定位之前的状态 所有后续的div不会填补div1的空缺位置,而是继续按照文档流来排序 */ } .inside1{ margin:10px; padding: 10px; background-color:#fffcd3; border:1px dashed black; } </style> </head> <body> <div class="outside"> <div class="inside">div1</div> <div class="inside1">div2</div> </div> </body> </html>
出力結果:
(学習ビデオ共有: cssビデオチュートリアル、 htmlビデオチュートリアル)
以上がCSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。