ホームページ > 記事 > ウェブフロントエンド > 絶対位置決めの包括的な理解
絶対位置決めの包括的な理解
- 高洛峰オリジナル
- 2017-06-05 13:12:571910ブラウズ
次のエディターは、絶対配置についての包括的な理解をもたらします。編集者はこれがとても良いと思ったので、参考として共有します。編集者をフォローして見てみましょう
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>有关绝对定位的理解</title> </head> <style type="text/css">
/* 1. 位置が設定される前に、図 1 に示すように、大きなボックスが小さなボックスを包みます。これは、標準のドキュメント フローに準拠しています
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
width: 200px;
height: 200px;
background:blue;
}*/写真 1
/*2. 絶対配置では、要素の位置がドキュメント フローから独立するため、スペースを占有しません。
これは、実際には通常のフロー位置決めモデルの一部とみなされている相対位置決めとは異なります。これは、要素の位置が通常のフロー内の位置を基準にしているためです。絶対配置された要素は、最も近い配置された祖先を基準にして配置されます。要素に配置された祖先がない場合、その位置は元の包含ブロックを基準に配置されます。
図 2 に示すように
.box1{width: 500px;height: 500px;background:red;position: relative;}.box2{width: 200px;height: 200px;background:blue;position:absolute;top:150px;left:150px;
}*/図 2
/*3 に示すように、Box2 には幅と高さがなく、位置を設定しないと、box2 は標準ドキュメントに準拠する box1 によってラップされます。そして、ドキュメントの位置を占めるとき、幅は親要素の幅を継承し、高さはコンテンツによって自動的に拡張されます。
画像 3 など。
/*4。box2 には幅と高さがありません。配置が設定されている場合、box2 はドキュメント フローから外れます。要素を配置するときは、
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
background:blue;
}*/
上の図 4
.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
background:blue;
position:absolute;
top:150px;
left:150px;
}上 絶対配置に関するこの包括的な理解が、編集者によって共有されたすべての内容であり、参考になれば幸いです。 PHP 中国語 Web サイトをサポートします。
絶対位置決めに関するより包括的な理解と分析関連記事については、PHP 中国語 Web サイトに注目してください。 