html定位

定位的四种方式

1、默认定位：static 其没有top/bottom/left/right属性

2、固定定位：fixed 这个属性是把元素固定在视窗的某个位置，无论你如何滚动页面，该元素都会固定在该位置。

3、相对定位：是相对元素自身的定位，但是该元素用了定位之后，它原来的空间还是存在的，不会被占用，不过个人感觉relative 一般不会单独使用，基本都会和绝对定位一起使用。

html：

css:

.son{

float:left;

width:100px;

height: 100px;

margin:40px;

}

.one{

background: red;

}

.two{

position: relative;

top:100px;

left:50px;

background: green;

}

.three{

background: yellow;

}

那么给第二个元素进行相对定位后，效果图是这样的

4、绝对定位：absolute 要么以一个父级元素进行定位（该父级元素是相对定位），要么就是以所在的浏览器窗口定位，这个是相对于父级元素的绝对定位

html：

css:

.box{

position: relative;

width:200px;

height: 200px;

background: blue;

}

.son{

position:absolute;

width:100px;

height:100px;

background:red;

}

效果：

只要改变top和left的值就可以移动里面红色区域的位置。

绝对定位还会遇到层级的问题，如果两个块元素使用了绝对定位

html:

css:

.box{

position: absolute;

width:100px;

height: 100px;

background: blue;

/*z-index: 1000;*/  改变层级

}

.pad{

position: absolute;

width:100px;

height: 100px;

background: red;

}

用了绝对定位之后两个元素是重合的，效果：

这个就是层级的问题了，其实只要加大下面的元素的层级，z-index:1000就行，那么效果就会显示蓝色