相対と絶対を区別する_html/css_WEB-ITnose-htmlチュートリアル-php.cn

相対と絶対を区別する_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 11:25:48

オリジナル

1106 人が閲覧しました

彼らと言えば、誰もがよく知っているはずです。相対、相対位置、絶対、絶対位置。しかし、それらは一体何なのでしょうか？

w3c 定義を参照してください。以下の表を参照してください

位置	意味
相対	要素ボックスは特定のオフセットによってオフセットされています距離。要素は、配置されていない形状と元のスペースを保持します。
absolute	要素ボックスはドキュメントフローから完全に削除され、その要素ボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメントフローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロックレベルのボックスを生成します。

くそー、これを言うとちょっとぼんやりしてきます。

恐れることはありません、団結は強さです、一緒に段階的に分析しましょう。

1. 相対

上記の相対の w3c 定義を考慮して、まずデモを作成しましょう。

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .ourRelative {                border:1px solid #FF0000;                position:relative;                left:-10px;            }            </style>    </head>    <body>        I'm <span class="ourRelative">relative</span>,I'm over!    </body></html>

ログイン後にコピー

レンダリングは次のとおりです:

コードと組み合わせると、位置を設定することで「相対的に」 10 ピクセル左に移動したことに気づいたかどうかわかりませんが、何でしょうか?右側の空いたスペースは、右側の「、終わりました！」によって圧迫されていないことがわかります。それはどういう意味ですか？

1. 相対的に配置された要素は通常のフロー内にあります。

2. 相対的に配置された要素は、left、right、top、およびbottom 属性によって相対的にオフセットされます。要素がオフセットされても、元の要素が占めていたスペースはそのまま保持されます。

上記のコードでは、テキスト「relative」を囲むために要素を使用していることに気づいたかどうかわかりませんが、これは何を意味するのでしょうか?

推測:position:relative は要素の表示を変更しません。

デモを書いているときに濡れてしまいましたね。

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .ourRelative {                /*将宽高设置为100px*/                width:100px;                height:100px;                border:1px solid #FF0000;                position:relative;                left:-10px;            }            </style>    </head>    <body>        I'm <span class="ourRelative">relative</span>,I'm over!    </body></html>

ログイン後にコピー

上記のコードにspan要素の幅と高さを追加しましたが、インライン要素の効果はまだ表示されています。

納得できないですか?

上記のコードを再度変更し、スパン表示をインラインブロックに変更したまま、幅と高さは 100 ピクセルに設定されているため、このように表示されます。

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .ourRelative {                /*将元素的span变为inline-block*/                display:inline-block;                width:100px;                height:100px;                border:1px solid #FF0000;                position:relative;                left:-10px;            }            </style>    </head>    <body>        I'm <span class="ourRelative">relative</span>,I'm over!    </body></html>

ログイン後にコピー

position:relative は要素の表示を変更しないことを説明してください。

2. Absolute

上記の w3c の絶対の定義を考慮して、デモも書いてみましょう。図 1 のを絶対位置 (position:absolute) に変更するだけです。

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .ourRelative {                border:1px solid #FF0000;                /*将position改为absolute*/                position:absolute;                left:-10px;            }            </style>    </head>    <body>        I'm <span class="ourRelative">relative</span>,I'm over!    </body></html>

ログイン後にコピー

なんてことだ、これは一体何だ。どうして。ちょっと待って、測定して何が起こっているのか見てみましょう。以下の図を参照してください。

図 1 は、span 要素全体の幅を示しており、80 ピクセルであることがわかります。要素の幅（可能な限り）ほら、70 ピクセルです。

したがって、絶対的な位置決め、ここでは体の左上隅に基づいています。

なぜですか?

絶対配置では、left、right、top、bottom 属性を使用して、最も多くの配置設定で最も近い親オブジェクトを基準とした絶対配置が実行されるため、オブジェクトの親が配置属性を設定していない場合、そのためです。 HTML の配置ルールに従う場合は、body オブジェクトの左上隅を基準に配置されます。

ここにはspan要素が1つしかなく、その親要素がbodyであるためです。だからこそこのパターンが現れるのです。

そして、w3cが言ったように、絶対配置はドキュメントフローから分離されているため、絶対配置要素「,I'm over!」の右側のテキストは、それが存在しないかのように扱われ、その位置を占めます。

ねえ、相対配置では要素の表示は変わりませんが、絶対配置ではどうなるでしょうか?

絶対配置により要素の表示が変更されます。それらをブロック (ブロックレベル要素のモード) に統合します。

信じられないですか?次に、上記の絶対位置コードを一緒に改良して、span 要素の幅と高さをそれぞれ 100 ピクセルに設定しましょう。

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .ourRelative {                border:1px solid #FF0000;                /*将position改为absolute*/                position:absolute;                /*为absolute添加width和height*/                width:100px;                height:100px;                left:-10px;            }            </style>    </head>    <body>        I'm <span class="ourRelative">relative</span>,I'm over!    </body></html>

ログイン後にコピー

レンダリングを以下に示します。

くそー、絶対配置は非常にクールなようです。要素の表示を直接変更し、要素をブロックに統合します。

セクション:

1. 絶対配置後の要素はドキュメントフローから外れ、元のスペースは存在しません。

2. 絶対配置後の要素。オブジェクトの親が位置属性を設定していない場合、つまり HTML 位置規則に従っている場合、位置は本文オブジェクトの左上隅に基づいて決定されます。参考として;

3. 絶対配置された要素の場合、要素の表示はブロックに変更されます。

もう 1 つ:

要素が相対位置に設定されているか絶対位置に設定されているかに関係なく、他の要素の内容もカバーされます。これは何を意味しますか?

position:absoluteを例に挙げます

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                * {                margin:0;                padding:0;            }            .normal {                width:100px;                height:100px;                background:#FFC0CB;            }            .ourAbsolute {                width:70px;                height:70px;                position:absolute;                background:#008000;                left:0;                top:0;            }            </style>    </head>    <body>        <div class="normal"></div>        <div class="ourAbsolute"></div>    </body></html>

ログイン後にコピー

下の写真をご覧ください

緑色のボックスを絶対位置に設定し、上と左の両方が0になります。次に、本体から開始してピンクのボックスを覆います。絶対に配置された緑色のボックスをピンクのボックスで覆いたい場合はどうすればよいですか?これは非常に簡単で、絶対位置の z-index を 0 に設定するだけで機能します。

相対的な位置を設定するためにコードを自分で変更してテストしてください。