HTML常见定位方式

static默认定位方式

默认值。元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个矩形框，置于其父元素中。

relative相对定位

相对该元素应当显示的左上角重新定位，虽然脱离了标准流，但它原来的空间不能被占用。

Snip20170102_1.png

//html文件



    
    
    


    
内容1
        
内容2
    
内容3
    
内容4
 

//css文件
.div1{
    width: :70px;
    height: 30px;
    background: silver;
    float: left;
    margin-left: 5px
}
#spe{
    position: relative;
    left:40px; 
    top:100px;
}

absolute绝对定位

是指对该元素最近的那个脱离的标准流的元素定位，如果没有父元素，则相对body左上角定位

Snip20170102_2.png

注意：如果决定定位的这个元素的父元素脱离了标准流，那么设定位置将是相对于他的父元素，如图：

Snip20170102_3.png

//只贴出关键代码
//html文件

    

        内容2
    

//只贴出关键代码
//css文件
.div2{
    position: relative;
    width: 200px;
    height: 150px;
    left: 100px;
    top: 100px;
    background:pink;
    float: left; 
}
#spe{
    position: relative;
    left:40px; 
    top:100px;
}

fix固定定位

元素框的表现类似于将position设置为absolute,不过其参考系是视窗本身。

z-index层级设置

值小则会在底层

Snip20170102_5.png