8.css-定位

定位是网页布局方式中的定位流排版方式，定位分为四种：相对定位、绝对定位、固定定位、静态定位。

一.相对定位

相对定位就是相对自己原先在标准流中的位置来移动。

1.注意：

1.1相对定位不会脱离标准流，会继续在标准流中占有一份空间。

1.2相对定位中同一方向上的定位属性只能使用一个。

1.3由于相对定位是不脱离标准流的，故块级元素、行内元素、行内块级元素这些在标准流里的概念在定位流中照样使用。

1.4在给相对定位的元素设置margin值后，这个margin值是以它定位前的时候进行设置外边布局的。

2.应用场景：

2.1用于对元素进行微调（用的不多）

2.2和绝对定位配合使用（用的最多）

二.绝对定位

绝对定位就是相对于body来定位。全部都是吗？看以下规律

1.规律：

1.1默认情况下，所有的绝对定位的元素，无论是否有祖先，都是以body来作为参考点

1.2如果一个绝对定位元素有祖先元素，并且这个祖先是定位流（这个所谓的定位流是指相对定位、绝对定位、固定定位、但是没有静态定位），那么这个绝对定位的元素就会以那个定位流的祖先作为参考点。若有很多个祖先都是定位流，那就找最近的。

2.注意：

2.1绝对定位脱离标准流

2.2由于绝对定位脱离标准流，故绝对定位是不区分块级元素、行内元素、行内块级元素的，即所有的元素都可以设置宽高

2.3如果一个绝对定位的元素是以body作为参考点，那么其实是以网页的首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。（这个是不单独使用绝对定位的最大原因，也就引出了子绝父相）

2.4一个绝对定位的元素会忽略祖先元素的padding值，即若给一个绝对定位的子元素一个left:0;top:0;那么它才不会管你父元素是否有padding值，直接和边框对齐。

三.子绝父相

1.使用相对定位弊端：并没有脱离标准流，故这个“全球购”文字并没有水平居中，原因是这个img标签在它的右边还占有位置。不利于布局界面。

2.使用绝对定位弊端：看似很完美，但是一旦调整浏览器的大小，这个img标签就会跑偏，是因为绝对定位是以body作为参考点。

3.子绝父相： 以父亲作为儿子的参考点,而父亲给个相对定位，left和top都不设置值，就完美了，企业开发中99.999%都使用这个

4.绝对定位水平居中：绝对定位水平居中时，margin:0,auto失效。在上个图片中，是通过px调img的left来居中，若改变全球购这个li的宽度，那么img就不会居中，如何让它时时刻刻都居中呢？那么 就是要left:50%;margin-left:width/2;即可，即把这个儿子的绝对定位一直是它父亲的宽度的一半，并且呢再向左边移动它本身长度的一半即可。

四.固定定位

1.注意：

        1.1固定定位跟绝对定位一样，也脱离标准流。

        1.2固定定位跟绝对定位一样，不区分块级元素、行内元素、块级行内元素。

        1.3固定定位与绝对定位的区别是：固定定位会被钉在那个，像背景图片的background-attachment:fixed;属性一样。

五.静态定位

元素默认的定位就是静态定位

六.定位流中z-index

默认情况下所有的元素都有一个默认的z-index属性，默认值是0，z-index属性的作用是专门用于控制定位流中元素的覆盖关系的。

1.规律：

          1.1默认情况下浮动流的元素会覆盖标准流的元素

           1.2默认情况下定位流后面编写的元素覆盖前面的元素

           1.3如果定位流的元素设置了z-index，谁的z-index大谁就显示在上面

2.注意：从父现象

          2.1如果两个元素的父元素都没有设置z-index，那么谁的z-index大谁就显示在上面

          2.2如果两个元素的父元素设置了z-index，那么子元素的z-index就会失效，也就是说谁的父元素的z-index大谁就在上面。