CSS-14-定位

1.定位模式

1.静态定位的特点(不用了解)
定位属性: 默认是静态定位
定位的元素,还有另外一套位移手段,边偏移属性: top bottom right left.
但是对于静态定位(标准流)来讲边偏移属性有没有作用呢???----没有任何作用.
可以把静态定位默认为不是定位即可.

2.固定定位的特点
1.可以实现模式转换,拥有行内块的特点
2.可以脱离标准流,不占据标准流的位置
3.不会随着内容滚动,会固定在某个位置(固定的导航栏,固定的头部,固定的小广告,固定性感荷官在线发牌)

固定定位的位移参照浏览器的可视区域/body

固定定位元素能使用margin,还可以使用边偏移属性,边偏移属性写0是有效果的

3.绝对定位的特点
1.可以实现模式转换,拥有行内块的特点
2.可以脱离标准流,不占据标准流的位置

绝对定位的位移参照物:
1.当所有的父元素都没有定位,那么参照浏览器窗口
2.如果父元素有定位,那么参照最近的定位父元素—工作中最常见的—子绝父固,子绝父绝,子绝父相(常用)!!!

绝对定位元素能使用margin,还可以使用边偏移属性,边偏移属性写0是有效果的

4.相对定位的特点
1.不能实现模式转换,是啥还是啥
2.不能脱离标准流,在哪还在哪

一般相对定位是配合绝对定位实现: 子绝父相

相对定位元素能使用margin,还可以使用边偏移属性,边偏移属性写0是有效果的
相对定位的边偏移属性不会顶开其他标签

2.定位的盒子水平与垂直居中

相对定位:   margin: 0 auto;
先走父盒子的一半,再往回走自己的一半
left: 50%; margin-left: -100px;
top: 50%; margin-top: -100px;

3.堆叠属性z-index属性

控制定位元素互相之间的层级-----z-index(只能给定位元素使用,标准流与浮动流不能用z-index)
默认情况,html结构越往后,层级越高
如果使用z-index,数字越大,层级越高

4.拓展:

left和right会冲突,只执行left
top和bottom会冲突,只执行top
给left添加auto是恢复默认状态,也就是清空.
给top添加auto是恢复默认状态,也就是清空.