css中的定位问题

定位: position:static|absolute|relative|fixed     

静态定位|绝对定位|相对定位|固定定位

1. 静态定位

position：static  默认值。代表元素按文档流摆放。

2 .绝对定位（重点）

position：absolute

2.1  绝对定位脱标

元素在使用绝对定位之后，不在占据原来文档流位置（空间），即脱离标准文档流。

2.2  绝对定位的参考点

元素使用绝对定位，并且使用left和top进行位置设定时，具体位置是从浏览器窗口左上角出发；当使用right和top时，是从浏览器的右上角出发；当使用bottom和left时，是从浏览器首屏的左下角计算；当使用bottom和right时，是从浏览器首屏的右下角计算。

2.3  绝对定位的以盒子为参考元素

1. 嵌套的盒子，父盒子使用定位（非静态），子盒子绝对定位，那么子盒子位置是从父盒子位置出发，如果是left和top，则从盒子的左上角开始计算，无视border的宽度和padding。

1. 如果盒子设置了绝对定位，则设置left和top时，参考点从祖先元素中寻找离它最近的一个设置了定位的祖先元素作为参考，不一定是父元素。

2.4  绝对定位影响块行的正常显示

3 相对定位（重点）

作用1：相对自己原来的位置进行定位，还占据原理的位置，经常用作位置的微调。

作用2：子绝父相。

练习：制作网页里的小广告，固定在浏览器首屏的右下角，小广告的右上角有关闭按钮

4 固定定位（重点）

position:fixed；left:0;top:0;

参考元素是浏览器窗口。

多用于网页里的固定导航、回到顶部的按钮及网页里的小广告