html特殊定位,HTML常见定位方式

static默认定位方式

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

relative相对定位

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

Snip20170102_1.png

//html文件

Document

内容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