前端学习之CSS---定位、锚点、精灵图、浮动、窗口自适应

定位、锚点、精灵图、浮动、窗口自适应

一、定位—position

position : static/ absolute/ relative/ fixed/ sticky
static : 默认值
absolute : 绝对定位，脱离文档流，当没有父元素或者父元素没有定位，参照物为浏览器窗口的第一屏
			有父元素且父元素有定位时，参照物为父元素
relative : 相对定位，不脱离文档流，相对于自己的初始位置
fixed : 固定定位，脱离文档流，参照物为浏览器的当前窗口
sticky : 粘性定位，可以做吸顶效果，css3新特性，兼容性不好

层叠顺序：z-index 属性是不带单位的，允许负值，不设置时最后写的优先显示，设置后数值越大层级越高

1、绝对定位—absolute

两个父子关系的盒子，子盒子需要绝对定位时，父盒子如果没有定位的话，通常设置为相对定位，否则子盒子的参照物会变为浏览器窗口的第一屏。相对定位不设置偏移的话不会影响父盒子的位置。

子绝父相

 

将行内元素转为块元素的方式：

1. display : block
2. position : absolute
3. float : left

 

2、粘性定位—sticky

position : sticky 
top