【Webフロントエンドを0から1まで学ぶ】CSS配置問題3（相対配置、絶対配置）_html/css

【Webフロントエンドを0から1まで学ぶ】CSS配置問題3（相対配置、絶対配置）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:35

オリジナル

973 人が閲覧しました

はじめに:

最初に、画面全体を満たすように div ボックスを設定する方法を最初に解決したいと思いました。

以下のHTMLコードを見てください:

<body>    <div id="father-body">        <div class="item1"></div>    </div></body>

ログイン後にコピー

実装方法1:

html, body,#father-body{ height:100%; width:100%; background-color:#123456; }

ログイン後にコピー

ここでは主にCSSにおける%(パーセント記号)の使い方について説明します。 % は、親要素または祖先要素に固定の幅と高さが定義されている場合にのみ使用できます (または使用すると効果があります)。

実装方法 2:

#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }

ログイン後にコピー

ここで、#father-body の Position 属性を設定して、独自の BFC をトリガーします。それ自体に幅と高さを使用した場合にのみ有効になります。

位置の固定値の意味:

オブジェクトは通常のフローから離脱し、スクロールバーが表示されるときに、上、右、下、左などの属性を使用してウィンドウを配置します。オブジェクトは一緒にスクロールしません。

position 属性のいくつかの値の概念:

1. 相対位置決め

上記の定義を使用して、コードの一部を見てみましょう:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style></head><body>    <div>        <div class="item1"></div>        <div class="item2"></div>        <div class="item3"></div>    </div></body></html>

ログイン後にコピー

効果は次のとおりです。

右上、左下などの属性を使用する場合、CSS コードは次のとおりです:

<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>

ログイン後にコピー

確認できる効果は次のとおりです:

ここで、使用時にそれを確認できます。右上左下 (これら 4 つの属性は、特定のピクセル数を設定してパーセンテージを設定することもできます) このように、属性によって要素の位置が変更されても、他の要素の位置には影響しません。 margin などの属性を使用して要素の位置を変更すると、他の要素の位置に影響します。

概略図は次のとおりです (W3CSchool からの画像):

2. 絶対位置決め

次のコード部分を見てください:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style></head><body>    <div id="body-div">        <div class="item1">Box-1</div>        <div class="item2">Box-2</div>        <div class="item3">Box-3</div>    </div></body></html>

ログイン後にコピー

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

Box-2 は絶対位置属性を設定します

.item2{ position:absolute; }

ログイン後にコピー

この時点で、Box-2 はドキュメントフローから分離され、その効果は次のとおりです:

この時点で、Box-3 の位置は、ボックス 2 の前の位置。そして、Box-2 と Box-3 の左側の境界線が重なり合います。また、ボックスの幅はボックス内の要素に応じて調整されます。

ボックスが絶対位置に設定されているが、ボックスのオフセットを設定するために右上下左を使用しない場合、ボックスは元の位置を占めます。

では、プロパティを右上と左下に設定すると、どのような効果が得られるでしょうか?

次のコードを設定します:

rrree

効果は次のとおりです:

それでは、直接の親要素を位置決めされた要素に設定するとどうなるでしょうか?

上記から 2 つの結論が導き出されます:

1. 絶対配置を使用するボックスは、「最も近い」「既に配置されている」「祖先要素」に基づいてオフセット (配置) されます。配置されている祖先要素がない場合、配置はブラウザウィンドウに基づいて行われます。
2. 決定的に配置されたボックスは標準フローから切り離されます。つまり、後続の兄弟ボックスの配置には影響を与えません。他のボックスは、このボックス (絶対位置のボックス) が存在しないかのように動作するようです。

3.z-index属性

z-index属性は、その名前が示すように、ページがx-y軸の場合、それに垂直な方向の、重なっているブロックの上下の位置を調整するために使用されます。ページは Z 軸です。大きな Z インデックスを持つページは、小さな Z インデックスを持つページの上に配置されます。

以下のコードを見てください:

.item2{ position:absolute; top:0; right:0; }

ログイン後にコピー

一般的な位置拡張:

私は以下のコードを個人的にテストし、効果を達成できたので、レンダリングは示しません(コードに関する質問はメッセージで受け付けます):

1. 水平方向のセンタリング

.item1{ position:relative; z-index:3; }        .item2{ position:absolute; top:0; right:0; z-index:1; }

ログイン後にコピー

1.1 インライン要素の水平方向のセンタリング

/*行内元素水平居中*/        #body-div{ text-align:center; }

ログイン後にコピー

1.2 ブロックレベルの要素の水平方向のセンタリング

/*块级元素水平居中*/        #body-div{ margin:0 auto; }

ログイン後にコピー

1.3 複数のブロックレベルの要素の水平方向のセンタリング

/*多个块级元素水平居中*/        #body-div{ text-align:center; }        ##body-div-container{ display:inline-block; }

ログイン後にコピー

2.水平方向と垂直方向のセンタリング

2.1 既知の幅と高さの垂直方向と水平方向のセンタリング

/*已知高度和宽度的水平垂直居中*/        #body-div{ position:relative; }        #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }

ログイン後にコピー

2.2 未知の幅と高さの垂直方向と水平方向のセンタリング

/*未知高度和宽度的水平垂直居中*/        #body-div{ position:relative; }        ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; }

ログイン後にコピー

2.3 センタリング要素がインラインまたはインラインブロックの場合

    #body-div{ display:table-cell; text-align:center; vertical-align:middle; }        ##body-div-container{ }

ログイン後にコピー