絶対位置決めの包括的な理解-CSSチュートリアル-php.cn

絶対位置決めの包括的な理解

高洛峰

リリース： 2017-06-05 13:12:57

オリジナル

1918 人が閲覧しました

次のエディターは、絶対配置についての包括的な理解をもたらします。編集者はこれがとても良いと思ったので、参考として共有します。編集者をフォローして見てみましょう

<!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 はドキュメントフローから外れます。要素を配置するときは、

width は無効になります。これは、図 4 に示すように、幅と高さがコンテンツによって自動的に拡張されることを意味します。幅と高さが必要な場合は、別途設定する必要があります*/

.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 サイトに注目してください。絶対位置決めの包括的な理解