CSS定位

1.relative相对定位

　　1>.不影响元素本身的特性(只是给元素加上position:relative属性元素本身不受影响)

　　2>.不使元素脱离文档流

　　3>.如果没有定位偏移量，对元素本身没有任何影响

2.定位元素位置控制

　　top/left/right/bottom:定位元素偏移量

3.absolute绝对定位

　　1>.使元素完全脱离文档流

　　2>.使内嵌元素支持宽高

　　3>.块属性标签由内容撑开

　　4>.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移

　　5>.相对定位一般都是配合绝对定位使用的

4.定位层级 z-index:number

　　a.定位元素默认后者层级高于前者

5.遮罩弹窗

　　标准不透明 opacity: number 其中number为0到1之间的数字

　　IE滤镜 filter:alpha(opacity=number) 其中number为0 到100之间的数字， 标准不透明属性在ie下不起作用，所以为了兼容ie需要加上ie滤镜

示例代码：

	.mask{
		background: #000;
		height: 100%;
		width: 100%;
		position: absolute;
		opacity: 0.5;
		filter:alpha(opacity=50);
		left: 0px;
		top: 0px;
	}
	.login{
		width: 400px;
		height: 300px;
		position: absolute;
		background: #fff;
		margin-left: -200px;
		margin-top: -150px;
		left: 50%;
		top: 50%;
	}

　　　　　　<div class="mask">
　　　　　　</div>
　　　　　　<div class="login">
　　　　　　　　<h3>登录</h3>
　　　　　　</div>

效果图：

6.固定定位 position:fixed

　　与绝对定位的特性基本一致，差别是始终相对于文档进行定位，也就是说纵轴出现滚动条，滚动滚动条的时候，位置也是不会随着滚动而改变。

　　问题：IE6不支持固定定位。

7.定位的兼容问题、清浮动方法

　position:relative;

        在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

　position:absolute;

       在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

   position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

   position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

 

来源：https://www.cnblogs.com/erduyang/p/4799616.html