css之position

1. inherit

从父元素继承 position 属性的值。

2. static  默认值

没有定位，元素在文档流中正常出现。（不受 top, bottom, left, right 或者 z-index 设置的影响）

    1、每个元素都在页面有自己的空间

    2、每个元素都是从父元素的左上角开始显示

    3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行

    4、行内元素是多个元素在一行显示，从左往右逐个排列

3. fixed  固定定位

相对于浏览器窗口进行定位。即使窗口滚动它也不会移动。

fixed定位使元素脱离文档流，元素的位置与文档流无关，不占据空间。

元素的位置通过 "left", "top", "right" ，"bottom" 属性进行定位。

4. relative  相对定位

相对定位元素的定位是相对其正常位置。它原本所占的空间不会改变。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

相对定位元素经常被用来作为绝对定位元素的容器。

5. absolute  绝对定位

absolute 使元素脱离文档流，定位使元素的位置与文档流无关，因此不占据空间。

如果父级有位置定位（relative/absolute/fixed），则以祖先元素作为坐标的参考；

如果祖先没有设置定位，则一直往上找，直到找到body，就以body来进行定位，即相对于整个窗口来定位；

6. float 浮动

元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位；浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘；浮动就是解决多个块级元素在一行显示的问题。

    1. 元素一旦浮动，如果没有定义宽度，宽度会以内容为准；

    2. 元素一旦浮动起来，就变成了块级元素，可以设置宽高，可以设置上下外边距；

    3. 文本，行内元素，行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素，围绕者浮动元素显示；

    4. 清除浮动：元素一旦浮动起来会对后续元素带来一定影响（后续元素会上前补位），如果后续元素不想上前补位，那么给后续元素设置clear，清除前面浮动元素带来的影响；

    5. 父级块级元素的高度如果不设置，高度以内部元素内容为准，但是如果内部元素都是浮动元素，浮动元素不占据页面空间，父元素的高没有了，就像消失了一样。解决办法：1. 给父元素设高；2. 在父元素中最后追加一个空的块级元素，并设置clear：both。

 

---