css Box Model Positioning

1、Static 配置

HTML要素のデフォルト値、つまり配置はなく、要素は通常のフローに表示されます。
静的に配置された要素は、top、bottom、left、rightの影響を受けません。

2. 固定位置

要素の位置は、ブラウザウィンドウに対して固定された位置です。
ウィンドウがスクロールされても動きません:

固定位置では、ドキュメントフローとは独立して要素が配置されるため、スペースを占有しません。
固定位置の要素は他の要素と重なります。

3. 相対配置

相対配置された要素の配置は、その通常の位置に対して相対的に行われます。

相対的に配置された要素や互いに重なっている要素の内容は移動できますが、元の占有スペースは変わりません。

相対的に配置された要素は、絶対的に配置された要素のコンテナブロックとしてよく使用されます。

4. 絶対配置

絶対配置要素の位置は、最も近くに配置された親要素を基準とします。

絶対配置では、要素の位置が決まります。ドキュメントフローに対して独立しているため、スペースを取りません。
絶対的に配置された要素は他の要素と重なります。

重複する要素
要素はドキュメントフローとは独立して配置されるため、ページ上の他の要素と重複することができます
z-index property は要素の重なり順 (どの要素が最初に来るか、後ろに来るか) を指定します
要素には正または負の重なり順を指定できます。
より高い重なり順を持つ要素は、常により低い重なり順を持つ要素の前にあります。
注: 配置された 2 つの要素が重なっていて、z-index が指定されていない場合、HTML コード内で最後に配置された要素が一番上に表示されます。

相対配置と絶対配置の違い

絶対配置(絶対):
1. この配置方法が割り当てられているオブジェクトをドキュメントフローからドラッグし、左、右、上、下などの属性を使用します。相対位置設定を持つ最も近い親オブジェクトが絶対位置決めに使用されます。オブジェクトの親が位置決め属性を設定していない場合、つまり HTML 位置決め規則に従っている場合は、本文オブジェクトの左上隅に基づいて位置決めされます。参考に。
2. 絶対的に配置されたオブジェクトは積み重ねることができ、積み重ね順序は z-index 属性を通じて制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値を持つことができます。
最も近い非標準ストリームの位置を基準として、元の位置が消え、後の位置に置き換えられます。

相対位置 (相対):
元の位置を基準にしますが、元の位置は保持されます。
オブジェクトは積み重ねることができず、その位置は左、右、上、下、その他の属性に基づいて通常のドキュメントフロー内でオフセットされます。
z-index レイヤードデザインも使用できます。

【チュートリアル】CSSボックスモード4（絶対配置と相対配置）を徹底的に理解する

例:

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多个标签同时设置，使用逗号分隔*/
        body, p, ul, li, img, a {
            margin: 0;
            padding: 0;
        }

        /*给定图片尺寸：否则会超出父容器，堆叠在一起*/
        img {
            width: 100%;
            height: 100%
        }

        /*让a标签绝对于li标签，li要设置relative*/
        li {
            list-style: none;
            position: relative;
            float: left;
            padding: 1%;
            width: 18%;
        }

        /*让删除红叉处于li的右上角，且需给定大小*/
        a {
            background: url(images/close.png);
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
        }</style>

ログイン後にコピー

レンダリング:

CSSボックスモデルの位置付けの詳細な分析