十二.定位

1.什么是定位？

	去改变元素的原来的位置

2.定位分类

static:普通文档流，无定位
absolute：绝对定位
relative：相对定位
fixed:固定定位

3.语法

定位=定位模式+偏移
定位模式：
    static:普通文档流，无定位
    absolute：绝对定位
    relative：相对定位
    fixed:固定定位
偏移：left right top bottom

4.绝对定位

position：absolute；
	1.通过left right top bottom控制偏移
	2.绝对定位参照对象：在父元素或祖先元素没定位的情况下，会参照浏览器边框即为body，如果父级有定位则以父级为相对定位，如果父亲无定位，爷爷有定位，则以爷爷为参照对象。
	3.绝对定位会脱离文档流，不占据空间，后面的元素还是正常文档流

5.相对定位

position:relative;
相对于原来处于的位置，不会脱离文档流

6.固定定位

position:fixed;
	参照对象：浏览器即body
	脱离文档流，位置不会变动

7.z-index层级属性

z-index:num；
用于决定定位元素（绝对、相对、固定）的层级关系，非定位元素无效果。

8.子相父绝

儿子用绝对定位，父亲用相对定位

居中问题

水平居中：
	1.针对文字，内联元素,对父级元素设置：
	text-align:center
	2.margin居中
	针对有宽度的块级元素
	margin-left:auto
	margin-right:auto
	3.用了绝对定位的有宽度的盒子，使用margin：0 auto;居中不会起作用
	需如下操作
	子元素设置
		position:absolute;
		top:0;
		left:50%;
		margin-left:-width的一半/transform:translateY(-50%)
垂直居中：
	单行文本、内联元素居中：
	line-hight = height
	利用表格垂直居中，直接在父级中添加：
        td标签自带如下属性 
            display:cell-table;
            vertical-align:middle;
	已知高度的块级元素
	position:absolute;
	left:0;
	top:50%;
	margin-top:-hight/2
水平垂直居中法一使用于有高宽，有绝对定位的元素
	position:absolute;
	top:50%;
	margin-top:-hight/2
	left:50%;
	margin-left:-width/2
水平垂直居中法二使用于有高宽，有绝对定位的元素
	position：absolute；
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
水平垂直居中：
	position：absolute；
	top:50%;
	left:50%;
	transition:translate(-50%,-50%)