CSS の配置の問題 (3): 相対配置、絶対配置_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の配置の問題 (3): 相対配置、絶対配置_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:19:16

オリジナル

1378 人が閲覧しました

はじめに:

最初に、画面全体を満たすように 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. 絶対位置決め

次のコード部分を見てください。エフェクト画像は次のとおりです:

私たちは Box-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 はドキュメントフローから外れており、その効果は次のとおりです:

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

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

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

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

rrree

効果は次のとおりです:

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

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

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

3.z-index 属性

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

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

.item2{            position:absolute;        }
ログイン後にコピー

一般的な位置拡張:

私は以下のコードを個人的にテストしており、効果が得られるので、レンダリングは示しません(コードに興味がある場合) ご質問がございましたら、メッセージを残してください):

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

1.3 複数のブロックレベル要素を水平方向に中央揃え

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

ログイン後にコピー

2. 水平方向の垂直方向の中央揃え

2.1 既知の幅と高さでの垂直方向の水平方向の中央揃え

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

ログイン後にコピー

2.2 垂直方向の水平方向のセンタリング幅と高さが不明

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

ログイン後にコピー

2.3 の場合、中央に配置された要素はインラインまたはインラインブロックです

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

ログイン後にコピー