CSS定位易错点、知识点

CSS之定位----position

静态定位----position=static

静态定位是基于标准流的定位，当想要使一个盒子固定定位或者绝对定位取消时，可使用。

相对定位----position=relative

相对定位是以自己的左上角作为偏移的起点。

绝对定位----position=absolute

绝对定位–父亲没有定位，孩子是以浏览器为基准点对齐，父亲有定位，则以父亲为基准点对齐，找最近的父级定位。

定位的盒子也可以水平或者垂直居中，算法如下:

1.首先left50% 父盒子的一半大小
2.然后走自己外边距父的一半值就可以了，用margin-left.

固定定位fixed

1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2.固定定位完全脱标，不占有位置，不随着滚动条滚动。
***固定定位的盒子一定要写宽和高，除非有内容撑开不用写。

叠放次序（z-index）

在css中，要想调整重叠定位的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意：
1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2.如果取值相同，则根据书写顺序，后来居上。
3.后面数字一定不能加单位。
4.只有相对定位，决定对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式。
因此，比如行内元素，如果添加了绝对定位或者固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。