HTML定位

1，static(默认)

当你没有为一个元素(例如div)指定定位方式时，默认为static，按照文档的流式(flow)定位，元素的位置取决于此元素是块元素还是行内元素,行内元素简单理解就是不会换行,而块元素会在结尾换行,占据整整一行,可以通过display来设置元素的属性,他有4个属性:inline-block;inline;block,none.

#jf {
    display: inline-block;
    width: 500px;
}
#jf div{
    width: 400px;
    margin-right: 40%;
}

left,top属性对static没有效果，static是靠margin这些定位的。

2，relative(相对定位)

在static的基础上，如果我想让一个元素在它本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。

3，absolute(绝对定位)

如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。

如果没有父元素，位置是相对于body来进行的。

4,relative–absolute(父相子绝)

父元素使用相对定位,而子元素使用绝对定位,子元素的绝对定位的参照物为父元素。

#sub_l{
    width: 300px;
    position: absolute;
    left: 600px;
    top: 30px;
}
#bottom{
    position: relative;
}