CSS_定位

1.相对定位

　　position:relative;

　　（1）不脱离标准文档流，可以调整元素

　　（2）以原来的位置为参考点

position: relative;
/*设置为相对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

2.绝对定位

　　position:absolute;

　　（1）脱离标准文档流，不在页面占位。

　　（2）层级提高，压盖现象。

　　（3）参考点，相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面的根元素左上角进行定位。

　　推荐：子绝父相，子元素用绝对位置，父亲元素用相对定位。

position: absolute;
/*设置为绝对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

3.固定定位

　　position:fixed;

　　（1）脱离标准文档流。

　　（2）一旦设置固定定位，在页面中滚动网页，位置固定不变。

　　（3）参考点为浏览器的左上角。

　　应用：小广告、回到顶部、固定导航栏。

position: fixed;
/*设置为绝对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

 4.z-index:

　　当给元素设置了定位，则会存中z-index属性，默认值为auto，当多个设置了定位的元素，z-index值大的元素在上面。

　　如果父级标签，设置了z-index属性，则子标签跟随父标签的z-index级别。