CSS の位​​置の簡単な分析:absolute

1. 絶対位置決めの特徴

絶対位置決めには、フローティングと同じ特性、つまりラッピング性と破壊性があります。

破壊性の点では、フローティングは要素の高さを破壊するだけで、要素の幅は保持されますが、絶対に配置された要素の高さと幅は失われます。

以下のコードを参照してください:

リーリー

コードを表示

2. 絶対配置の一般規則:

要素が絶対的に配置される場合、その要素はドキュメント フローから完全に外れ、その要素を含むブロックに対して相対的に配置されます。

絶対的に配置された包含ブロックは、最も近くに配置された祖先要素です。

祖先要素がブロックレベル要素の場合、それを含むブロックは祖先要素のパディング境界、つまり境界になります。

祖先要素がインライン要素の場合、それを含むブロックは祖先要素のコンテンツ境界、つまりコンテンツ領域になります。

位置指定された祖先要素がない場合、その要素の包含ブロックが最初の包含ブロックとして定義されます。

オフセット属性: 上、右、下、左。

絶対配置要素がオフセット属性を設定していない場合、ドキュメント フローから外れても、その位置はそのまま残ります。

要素を含むブロックの外側に配置するには、offset プロパティを負の値にすることができます。

コードはここにあります:

リーリー

コードを表示

3. マージンを使用して、絶対的に配置された要素の位置を調整します

絶対的に配置された要素は、上、右、下、左を使用してオフセットされるだけでなく、マージン値によって正確に配置することもでき、適応性が高くなります。

例:

リーリー

コードを表示

offset 属性を放棄し、代わりに margin を使用して絶対位置の要素を調整します。 原理は次のとおりです。

絶対配置要素。オフセットが設定されていない場合、ドキュメント フローから完全に外れても、元の位置に残ります。

正確な位置決めにはオフセット属性を使用します。特定の位置は、絶対的に配置された要素の含まれるブロックに応じて異なります。

正確な位置決めのためにマージンを使用すると、他に依存せず、より制御しやすくなります。

このブログ記事を書いているときに、アブソリュートから親戚にメッセージを送るよう頼まれました。「親戚の人、ここから出てってください。この世であなたに会いたくないです！」

次に何が起こるかを予測するには、ここをクリックして関連する章に移動してください。

4. 絶対的な配置と全体のレイアウト

絶対配置を使用してページ全体をレイアウトするにはどうすればよいですか?

シンプルで大雑把、学ばないと無駄！ ！ ！

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">頭</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">メタ</span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>絶対的な配置と全体的なページレイアウト<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">スタイル</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;"> * </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 余裕</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">すべての余白を 0 にリセットします。このステップは非常に重要です。そうしないと、レイアウトが台無しになります。</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">10</span> 
<span style="color: #008080;"> 11</span> <span style="background-color: #f5f5f5; color: #800000;"> html,body,.page </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 12</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 幅</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 13</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 身長</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 14</span> <span style="background-color: #f5f5f5; color: #ff0000;"> オーバーフロー</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 非表示</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">15</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">16</span> 
<span style="color: #008080;"> 17</span> <span style="background-color: #f5f5f5; color: #800000;"> .page </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 18</span> <span style="background-color: #f5f5f5; color: #ff0000;"> ポジション</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 絶対</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 19</span> <span style="background-color: #f5f5f5; color: #ff0000;">トップ</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 20</span> <span style="background-color: #f5f5f5; color: #ff0000;"> そうです</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 21</span> <span style="background-color: #f5f5f5; color: #ff0000;">下</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 22</span> <span style="background-color: #f5f5f5; color: #ff0000;">残り</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 23</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 背景色</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">24</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">25</span> 
<span style="color: #008080;"> 26</span> <span style="background-color: #f5f5f5; color: #800000;"> .header </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 27</span> <span style="background-color: #f5f5f5; color: #ff0000;"> ポジション</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 絶対</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 28</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 高さ</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 29</span> <span style="background-color: #f5f5f5; color: #ff0000;">残り</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 30</span> <span style="background-color: #f5f5f5; color: #ff0000;">そうです</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 31</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 背景色</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 紫</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 32</span> <span style="background-color: #f5f5f5; color: #ff0000;"> パディング</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 5px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 33</span> <span style="background-color: #f5f5f5; color: #ff0000;"> z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">34</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 35</span> 
<span style="color: #008080;"> 36</span> <span style="background-color: #f5f5f5; color: #800000;"> .header>h1 </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 37</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 行の高さ</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 38</span> <span style="background-color: #f5f5f5; color: #ff0000;"> text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">39</span><span style="background-color: #f5f5f5; color: #000000;">}</span></span></span>