いくつかの制御ページレイアウトCSS位置決め機構（相対位置及び絶対位置）

　　いくつかのCSSは、ページレイアウトの位置決め機構を制御します

　　ウェブ初心者、いくつかの方法でCSSのポジショニングのためにしばしば混乱し、いくつかの方法でCSSのポジショニングを総括する良い時間があるしつつ、必要なページレイアウトの効果を達することはできませんが、またとき彼自身を統合。

　　一般的な流れ、相対位置、絶対位置：CSSページレイアウトは、3つの制御位置決め機構を含んでいます。これは、CSSのpositionプロパティによって位置決め機構を示しています。また、あなたはまた、浮動要素を許可するようにフロートプロパティを使用することができます

　　通常の流れ

　　対応する構文（デフォルト）

　　位置：静的。

　　いわゆるノーマルストリームは、人間制御なしで、ブロックレベル要素とインライン属性素子自体のレイアウトに応じて行われます。各ブロック要素は線で示されており、各項目は次の行項目の前に表示されます。あなたはボックスの幅を開発し、また、十分な広並んでいるので、2つの要素の側としても、彼らが同じ行に表示されません。これは、HTML要素を処理し、デフォルトのブラウザで、CSS属性は要素が内部の一般的な流れの中に表示される必要があることを示して使用しないでください

次の例のすべてが、このHTML5コードを使用します

1  <！DOCTYPE htmlの> 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < タイトル>ハッピーキッチン</ タイトル> 
6      < リンクのhref = "test.css" REL =」スタイルシート」タイプ= "テキスト/ CSS" > 
7  </ ヘッド> 
8  < ボディ> 
9      <>路Div1 </ DIV > 
10      < DIVのID = "DIV2" > DIV2 </ DIV > 
11      < DIV ID = "DIV3" > DIV3 </ DIV > 
12  
13  </ ボディ> 
14  </ HTML >

CSSコード

1つの 本体
 2  {
 3      幅：750px;
4      色：ブラック。
5  }
 6  DIV
 7  {
 8      境界固体。
9      幅：400ピクセル;
10      高さ：200pxの。
11      テキスト整列：センター。
12  }
 13  位DIV1
 14  {
 15      の背景色を赤。
16  }
 17  位DIV2
 18  {
 19      背景色：緑。
20  
21  }
 22  ＃はDIV3
 23  {
24      背景色：青。
25 }

レンダリング：

　　相対的な位置

　　対応する構文

　　位置：相対

　　その通常の位置から要素の相対的な位置とは、流動動き、この動きは、周囲の要素の位置に影響を与える、またはそれらの通常の位置で流れでません。

CSSコード：

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5 }
 6 div
 7 {
 8     border: solid;
 9     width: 400px;
10     height: 200px;
11     text-align: center;
12 }
13 #div1
14 {
15     background-color: red;
16 }
17 #div2
18 {
19     background-color: green;
20     position: relative;
21     top:100px;
22     left:100px;
23 }
24 #div3
25 {
26     background-color: blue;
27 }

View Code

效果图：

理解：最重要的一点，相对是相对于其在普通流中的位置来说的，就是使用浏览器默认布局效果来说的。此时的Div2在其原来的位置上分别向下、向右移动了100px。并且另外一点，它不会影响Div3的位置，Div3还是在原来的位置上。

　　绝对定位

　　相应语法

　　position:absolute;

绝对定位的元素相对于它的包含元素，包含元素可能是文档中的另一个元素或者是初始包含元素，说白了，就是沿着其父层找已经定位的元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5 }
 6 div
 7 {
 8     border: solid;
 9     width: 400px;
10     height: 200px;
11     text-align: center;
12 }
13 #div1
14 {
15     background-color: red;
16 }
17 #div2
18 {
19     background-color: green;
20     position: absolute;
21     top:100px;
22     left:100px;
23 }
24 #div3
25 {
26     background-color: blue;
27 }

View Code

效果图：

理解：Div2的父层元素body没有使用定位，而body没有再往上的父层元素了，因此Div2实际上是相对于屏幕左上角分别向下、向右移动了100px。而Div2使用了绝对定位之后，从普通流中脱离，不再在流中占据空间，此时的Div3的上一个元素变成了Div1，因此Div3就按照普通流的顺序排在了Div1的后面。

假如我们给body元素也是定位，使用如下的CSS代码，效果就又不一样了

 1 body
 2 {
 3     width: 750px;
 4     color: black;
 5     position: relative;
 6     top:100px;
 7 }
 8 div
 9 {
10     border: solid;
11     width: 400px;
12     height: 200px;
13     text-align: center;
14 }
15 #div1
16 {
17     background-color: red;
18 }
19 #div2
20 {
21     background-color: green;
22     position: absolute;
23     top:100px;
24     left:100px;
25 }
26 #div3
27 {
28     background-color: blue;
29 }

View Code

理解：此时body不在屏幕的左上角了，相对于屏幕左上角分别向下、向右移动了100px，前一份代码body是位于屏幕左上角的。此时Div2的父层元素body使用了定位，因此Div2相对于body的起始位置分别向下、向右移动了100px，达到了现在的效果

对于绝对定位来说，使用了绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块

いくつかの制御ページレイアウトCSS位置決め機構（相対位置及び絶対位置）

おすすめ