文書フロー：
文書フローは、左から右へ、上から下へ順に箱に書かれた連続的なHTMLタグを指します。ライン当たりブロック要素、配置の行の左側の線要素は、第一の配列を書き込むために、背面に書き込みは、各ボックスは、その位置を占めています。
ポジショニングについて：
CSSの位置プロパティは、次のように設定項目の位置であり、位置決め要素のタイプを設定するために使用することができます。
（1）に対しては、要素の相対的な位置、ドキュメントフロー保持の要素によって占められる位置を生成するために、要素自体は、それ自体のホーム位置をオフセット。
（2）絶対絶対位置、ドキュメントストリームから要素を生成し、ストリームは、ドキュメントの位置を占有しない、ドキュメントフロー浮いとして理解することができ、それは場合は、検索に配置親要素に対して提供されませんこれは、本体要素に対して配置されています。
文書ストリームの位置を占有しない（3）ドキュメントからストリーム要素、固定位置決め要素を生成するために、固定された、それは文書フロー、ブラウザウィンドウの相対位置の上方にフローティングとして理解することができます。
（4）静的デフォルト値は、測位性無し文書、または同等の非標的性の通常の流れに現れる要素が配置されていません。（少ないです）
（5）親要素から継承された位置のプロパティ値を継承します。（少ないです）
位置決め要素をオフセット：
位置決め要素は、基準要素のオフセット値に対して左、右、上または下のセットを使用する必要があります。
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
/* 3.父级设置相对定位 */
/*position:relative;*/
}
.box01,.box02{
width:300px;
height:100px;
margin:10px;
}
.box01{
background-color:green;
/* 1.相对定位 */
/*position:relative; */
/*left:50px;*/
/*top:50px;*/
/* 2.绝对定位 相对于body进行定位 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/
/* 3.父级设置相对，子集设置绝对 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/
/* 4.固定定位 */
position:fixed;
left:50px;
top:50px;
}
.box02{
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>効果：
位置決め要素レベル：
フローティング要素は、通常のドキュメントフロー上に配置され、要素のZ-index属性の階層を設定するために使用することができます
以下のような：
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10; /* 将元素层级设置为10 */
}位置決め素子特性：
絶対位置と固定ブロック要素と位置決め要素は自動的にブロック要素内の行ラインに変換されます
誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。私たちは、フルスタックの学習Exchangeフロントエンド円をお勧めするためにここにいる：784783012は、交流と共通の進捗状況を学習し、×××議論に流入へようこそ。
学習の本当の始まりは、必然的に開始する場所がわからないだろう場合は、非効率につながる学習を継続する自信に影響を与えます。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。