位置決め流れ
1.カテゴリー
反対側の（1）。
（2）絶対配置
（3）が固定配置します
（4）静的位置決め
2.相対的な位置とは何ですか
それらの相対的な位置は移動するストリーム内の前の基準位置に対してです。
例：
< スタイル> のdiv { 幅：100pxに。 高さ：100pxに。 } .box1 { 背景色：赤。 } .box2 { 背景色：黄色。 } .box3 { 背景色：青。 } </ スタイル> </ ヘッド> < 身体> < div要素クラス= "BOX1" > </ divの> < divのクラス= "BOX2" > </ divの> < divのクラス= "BOX3" > </ DIV > </ ボディ>
今プロパティを変更BOX2
{.box2
背景色：黄色;
位置：相対; / *相対流れ標準的なフロー* /から逸脱することなく、
トップ：20ピクセル;
左：20ピクセル;
}
3.注：
（1）標準から逸脱することなく、流れに対して
（2）共配置プロパティは、相対的な位置決めに一方向にのみ使用することができます
標準的なフローから逸脱することなく相対的な位置決め〜（3）のためには、そうライン/行ブロック要素内の要素の相対的な位置決めは、識別要素をブロックすること/
標準的なフローから逸脱することなく相対的な位置決め〜（4）により、および要素の相対的な位置決めは、セットマージン/パディング要素は標準的なフローの配置の相対位置に影響する属性場合、標準ストリーム内の位置を占有します。（標準オリジナルストリームが位置調整され、すなわちセットマージン/パディング特性、標準的なフローの相対位置と再集合力であろうように）
（5）位置：相対;しばしばセットを忘れ。
{.box2
背景色：黄色;
位置：相対;標準的なフロー* /から逸脱することなく、/ *相対流量
トップ; 20ピクセル
：20ピクセル、左
マージントップ：20ピクセル;
}
前記相対的位置決めシナリオ
（1）のような微調整要素のために：標識の違いに起因する種々の標識併用、相対位置を使用して、位置合わせする必要が容易になります。
研究の背後に絶対位置と（2）を用いて行っ
第二に、絶対位置
1.絶対位置とは何ですか
絶対配置は、位置決めする本体に対してです。
先着順コード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D150_AbsolutePositoning</title> <style> div{ width:100px; height:100px; } .box1{ background-color: red; } .box2{ background-color: yellow; /*position:absolute;*/ } .box3{ background-color: blue; } span{ width:100px; height:100px; background-color: purple; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span>我是行内块级元素在绝对定位中的作用的</span> </body> </html>
2.绝对定位注意点
（1）绝对定位的元素是脱离标准流的
.box2{
background-color: yellow;
position:absolute;
}
（2）绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。
span{
width:100px;
height:100px;
background-color: purple;
position:absolute;
}
（3）这个绝对定位优点类似于浮动流
.box2{
background-color: yellow;
position:absolute;
right:0px;
bottom:0px;
三、源码：
D148_RelativePositioning.html
D150_AbsolutePositoning.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D148_RelativePositioning.html
https://github.com/ruigege66/HTML_learning/blob/master/D150_AbsolutePositoning.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
