2016.3.14CSS ポジショニング 6 日目_html/css_WEB-ITnose

CSS の配置 CSS の配置メカニズム

CSS には、通常のフロー、フローティング、絶対配置という 3 つの基本的な配置メカニズムがあります。
特に指定しない限り、すべてのタグは通常のストリームに配置されます。
ブロックレベルの要素は上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます。
インラインボックスは横一列に配置されます。水平方向のパディング、境界線、マージンを使用して、それらの間の間隔を調整できます。

position 属性

position 属性を使用すると、要素ボックスの生成方法に影響する 4 つの異なるタイプの配置を選択できます。
4 つの属性値が含まれます: static、relative、absolute、fixed

static: 要素ボックスは通常どおり生成されます。ブロックレベルの要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上の行ボックスを作成します。

relative: 要素ボックスは特定の距離だけオフセットされます。要素は配置されていない形状を保持し、要素が元々占有していたスペースも保持されます。

absoulte : 要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロックに対して相対的に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。ブロック要素は、通常のドキュメント フローで最初に生成されたボックスのタイプに関係なく、要素が配置されるときに生成されます。

修正: 要素ボックスは位置を絶対に設定するように動作しますが、そのボックスを含むブロックはブラウザ ウィンドウです。

コード表示

position: static;

staticはposition属性のデフォルト値であり、特別な位置指定はありません。いずれも通常の位置です。

position:relative;

HTMLコード:

<p class="p1">    我是p1</p><p class="p2">    我是p2</p><p class="p3">    我是p3</p>

CSSコード:

.p1 {    position: relative;    left: 30px;}.p2 {    position: relative;    right: 30px;}

レンダリング:

説明:

position:relative; 参照は元の位置です。

テキストの最初の行は、position を相対に設定します。これにより、反応は発生しませんが、p1 に left: 30px; も設定します。これにより、要素と左側の間に 30 ピクセルのギャップが作成されます。

同様に、テキストの 2 行目に right: 30px を設定すると、要素は右側から 30px 離れて表示され、画面の外に実行されます

サードパーティは何も処理せず、通常どおり表示されます

適切な位置: 相対; に設定する必要があることに注意してください。そうしないと、上、右、下、左が機能しません。

position: absoulte;

HTML コード:

啦啦啦啦啦<h1 id="我是h-大标题">我是h1大标题</h1>

CSS コード:

.h1 {    position: absolute;    top: 100px;    left: 100px;}

CSS スタイルを設定しない場合の外観:

CSS スタイルを設定した後の外観:

説明:

Position:Absolute; は、それ自体の親ビューである、それ自体を含むブロックを参照します

Position:Absolute; 属性が設定されている場合、ラベルの位置は絶対になります。このとき、top、right、bottom、leftのいずれかの属性を設定することでラベルの位置を設定できます。

position:Absolute; を設定する必要があることに注意してください。そうしないと、top、right、bottom、left が機能しません。

位置: 固定;

HTML コード:

<p class="one">    我是p one</p><p class="two">    我是p two</p>

CSS コード:

.one {    position: fixed;    top: 100px;    left: 30px;}.two {    position: fixed;    top: 50px;    right: 30px;}

効果表示:

説明:

位置: 固定;参照システムはブラウザウィンドウです

与えられたときPosition:fixed; 属性がタグに設定されると、これらのタグは Web ページのスクロールを無視して、ブラウザウィンドウに対する相対的な位置のみを設定します

同様に、position:fixed; 属性が設定されていない場合は、topと右側は直接設定されており、下と左は機能しません

参考記事：http://www.w3school.com.cn/css/css_positioning.asp

インターフェースのレイアウト優先z-indexの問題について

  <meta charset="UTF-8">  <title>Document</title>  <style media="screen">    div{      width: 100px;      font-size: 50px;      position: absolute;      height: 100px;    }    .a{      background-color: red;      left: 0;      top: 0;        /*设置优先级，数字越大，放置越靠前*/      z-index: 3;    }    .b{      background-color: blue;      left: 40px;      top: 40px;      z-index: 2;    }    .c{      background-color: green;      left: 80px;      top: 80px;      z-index: 100;    }  </style><div class="a">1</div><div class="b">2</div><div class="c">3</div>

Aboutインターフェース要素 ボックスオフセット

オフセット前:

オフセット後:

    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    .wrap{        width: 300px;        height: 300px;        border: 1px solid red;        margin: 100px;        padding: 100px;        position: relative;        padding-left: 0;    }    .inner{        width: 200px;        height: 200px;        background-color: green;        padding: 50px;        position: relative;    }    .content{        width: 50px;        height: 50px;        background-color: red;        position: absolute;        left: 0;    }    </style>    <!--     position:absolute;默认是相对于窗口进行定位     -->    <div class="wrap">        <div class="inner">            <div class="content"></div>        </div>    </div>