css基础07- 定位

定位

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

说定位之前，我们先来说一下定位属性，元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值如下，

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位（relative）

相对定位是让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
使用相对定位时，我们要清楚的两点：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
   也就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
   我们使用相对定位的目的作用，
3. 微调元素
4. 做绝对定位的参考，子绝父相

绝对定位（absolute）

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。若所有父元素都没有定位，以浏览器为准对齐(document文档)。父元素有定位时，则绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。但父元素不一定时相对定位，任何定位都可以。子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固。我们采用子绝父相来布局。因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。
说明一下，绝对定位的盒子会无视参考的那个盒子的padding，以父元素的border内侧作为参考点来定位。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了。定位的盒子也可以水平或者垂直居中，有一个算法。

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

固定定位（fixed）

当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点值得我们注意：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
3. ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index属性：表示谁压着谁。数值大的压盖住数值小的。

该属性值有如下特性：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
5. 定位了的元素，永远能够压住没有定位的元素。
   z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是层级的应用。

最后，我们做一下总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位元素跟浮动一样，元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

** 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现

display 显示
display 设置或检索对象是否及如何显示。

1. display : none 隐藏对象 与它相反的是 2. display:block 除了转换为块级元素之外，同时还有显示元素的意思。
   特点： 隐藏之后，不再保留位置。

visibility 可见性
设置或检索是否显示对象。

1. visible : 　对象可视
2. hidden : 　对象隐藏
   特点： 隐藏之后，继续保留原有位置。

overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

1. visible : 　不剪切内容也不添加滚动条。
2. auto : 　 超出自动显示滚动条，不超出不显示滚动条
3. hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
4. scroll : 　不管超出内容否，总是显示滚动条