定位
position：relative（相对） absolute（绝对） static（无定位） fixed（固定）
相对定位
relative：相对于该元素以前所在的位置
一般不作为元素单独显示出来，而是作为容器进行一种包含，做为父元素使用
绝对定位
相对于最近的祖先元素(父级元素)，如果没有，就相对于body
position: absolute;
使元素脱离文档流
position的相关属性
相对定位和绝对定位的区别：初始位置是否保留，相对位置会保留，绝对定位不会。
1 相对定位：设置偏移量之后，它本身的标准流文件的属性不会被破坏，它初始的位置依然占据了空间，使得它下面的标准流文件的位置不会发生改变。
2 绝对定位：将文件设置为绝对定位后，其效果相当于将该文件设置为浮动的效果一样，它后面的文件会占据它原本的位置，它与相对定位有着本质的不同。
相对和绝对定位
position:absolute/relative
top:
left:
成对出现
单独top ,left无效
浮动和绝对定位的相同点：
1>、都是漂起来的元素，也就是离开了原来的位置。
2>、不占据原来的位置。
3>、宽度会发生变化，比如：h1标签的文字宽度，默认只设height的情况下，它的width是铺满父元素的宽度的，而当浮动或绝对定位后，它的宽度就是h1内文字的宽度。
不同点：
1>、使用float(浮动)后，它后面的元素，会占据它原来的位置，但是后面元素的的文字图片等不会被它挡住，也就是不会出现重叠现象
position:absolute绝对定位后，它后面的元素，会占据它原来的位置，但是后面的元素，直接在它的左上角开始显示，会出现重叠现象
相对定位和浮动可以一起使用，在float控制浮动方向且不遮盖字体的情况下，由相对定位的设置来改变模块的偏移距离。
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xxx</title>
<style type="text/css">
.div1 .img1{
/* float: left; */
position: absolute;
left: 0px;
}
</style>
</head>
<body >
<div class="div1">
<img class="img1" src="images/logo.png">
<img src="images/03-02.jpg">
<img src="images/03-02.jpg">
<img src="images/03-02.jpg">
</div>
</body>
</html>
如上所示代码img1的图片会出现不同的css样式下，会出现重叠或不重叠的现象。
父元素中设置相对或绝对之后，子元素中不设置都会跟随父元素移动，但是标准流还是会根据父元素的高度进行排列。
z-index的使用
z-index改变层级顺序。z-index:数字；数字大的在上，小的在下。数字最好以整倍数设置：z-index:300; z-index:200; z-index:100;
z-index的值设置不可以太小，因为在一个大的布局当中很可能需要插入一层或者多层的层叠关系，因此设置的稍微大一些能够方便值的设定。
固定定位
position: fixed 相对于浏览窗口进行定位
滚动条下滑不受影响
设置了position：fixed固定定位的元素不受任何元素的影响
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
