position 的注意点与使用场景

position 的注意点与使用场景

position有四个属性

1.static：默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）,相当于没有定位，基本上用不到这个属性。

2.relative：位置被设置为 relative 的元素，可将其移至相对于其原来位置的地方，原来的位置遗留空白区域。

3.absolute 位置设置为 absolute 的元素，可位置相对于最近的已定位父元素(一般与用)，如果元素没有已定位的父元素，那么它的位置相对于window。已定位的元素会脱离文档流（相当于浮动），不占据空间。

4.fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。对于浏览器的位置是固定的。

position定位的元素的位置可以用通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
但我们也可以用transform: translate()对其位置进行调整，两者有何区别？

left right top bottom定位的使用：必须定义在position属性的元素下使用
定位机制：相对于父元素的位置进行定位。
使用方式 left:20px 或者left:50%,前者是距离父元素20px,后者是距离父元素宽度50%的距离。
注意点： 一般left和right在一个样式是只能使用其一，不能left和right都设置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用将会出现兼容问题，一个对象设置了靠左left多少距离，自然右边距离自然就有了所以无需设置左边，相同道理，top和bottom对一个对象只能使用其一。

transform属性应用于元素的2D或3D转换,transform: translate()则是transform中的一种2D平面移动，无需在position属性的元素下使用。
定位机制：相对于自己原来位置进行移动。
使用方式transform: translate(20px) 或者transform: translate(50%),前者是向左移动20px,后者是向左移动自己元素宽度的50%的距离。
注意点：多个transform属性添加在同一元素时后声明的会覆盖前面的，而不是原来的基础上再次移动。

			div{
				width: 100px;
				height: 100px;
				background: red;
				transform: translate(-100px);//向左移动100px
				transform: translate(100px);//向右移动100px
			}

结果是向右移动100px而不是回到原点。

再给多个不同位置的相同元素定位时 用left right top bottom定位会把所有元素重叠而transform则不会。

position :fixed 运用场景：

1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(登陆注册界面)
4.全屏背景（图片，视频等）

//全屏视频背景
video{  
	position: fixed;
	right: 0px;  
	bottom: 0px;  
	min-width: 100%;  
	min-height: 100%;  
	height: auto;  
	width: auto;
	z-index: -9;
}