相対ポジショニングは習得するのが非常に簡単な概念です。要素が相対的に配置されている場合は、その位置に表示されます。次に、垂直または水平位置を設定することで、要素をその原点に対して「相対的に」移動できます。
top を 20px に設定すると、ボックスは元の位置の上部から 20 ピクセル下になります。 left を 30 ピクセルに設定すると、要素の左側に 30 ピクセルのスペースが作成され、要素が右に移動します。
#box_relative {position: relative;
left: 30px;
top: 20px;
}
以下に示すように:
相対配置を使用する場合、要素は移動したかどうかに関係なく、元のスペースを占有することに注意してください。 。したがって、要素を移動すると、他のボックスが覆われてしまいます。
絶対配置では、要素の位置がドキュメント フローから独立するため、スペースを占有しません。これは、要素の位置が通常のフロー内の位置を基準とするため、実際には通常のフロー位置決めモデルの一部とみなされる相対位置決めとは異なります。
通常のフロー内の他の要素は、絶対配置された要素が存在しないかのようにレイアウトされます:
#box_relative {position: absolute;
left: 30px;
top: 20px;
}
絶対配置された要素の位置は、最も近い既に位置決めされている祖先要素。要素に位置決めされた祖先要素がない場合、その位置は元の包含ブロックを基準とします。
ポジショニングに関する主な問題は、それぞれのポジショニングの意味を覚えておくことです。それで、ここで学んだことを復習しましょう。相対配置はドキュメント内の要素の初期位置に「相対」しますが、絶対配置は最も近い位置にある祖先要素に「相対」します。配置された祖先が要素が存在しない場合は、「に相対」します。元の包含ブロック。
注: ユーザー エージェントによっては、最初に含まれるブロックがキャンバスまたは HTML 要素になる場合があります。
ヒント: 絶対に配置されたボックスはドキュメント フローから独立しているため、ページ上の他の要素を覆うことができます。 z-index プロパティを設定することで、これらのボックスの積み重ね順序を制御できます。
CSS 配置プロパティを使用すると、要素を配置できます。
要素を静的、相対、絶対、または固定位置に配置します。
属性値:
| Property | Description |
| top | は、位置決めされた要素の上マージン境界と、その要素を含むブロックの上境界の間のオフセットを定義します。 |
| right | は、位置決めされた要素の右マージン エッジと、その要素を含むブロックの右エッジの間のオフセットを定義します。 |
| bottom | は、位置決めされた要素の下マージン境界と、その要素を含むブロックの下境界との間のオフセットを定義します。 |
| left | は、位置決めされた要素の左マージンの端と、その要素を含むブロックの左端の間のオフセットを定義します。 |
属性值：
设置当元素的内容溢出其区域时发生的事情。
属性值：
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
属性值：
设置元素的垂直对齐方式。
属性值：
属性值：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
float
属性值：
实例（把图像向右浮动）：
img
{float:right;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" ></div>
<div>
<div>
<div>
</div>
</body>
</html>
截图如是：
第一个
第二个
第一个
我们对比这几幅截图，可以得知以下几点：
其实，如是解析仍感觉对float的“破坏性”描述的不太明白，好吧，再来个例子。看看float的本职工作。
<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style='float:left'>
哇咔咔，我生来是做文字文字环绕效果的！
</div>
</body>
</html>
去掉'float:left'的元素：
带有'float:left'的元素：
元素去掉'float:left'时的
元素带有'float:left'时的
其实 ，我一直想强调，但一直没能说清楚的是：
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
