absolute如果找不到定位父元素那么会相对于谁进行定位

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。

为什么要用定位？

举例，京东商城网页....

如果说浮动的主要目的是让多个块级元素在一行显示，那么定位的主要价值就是移动元素位置，让元素移动到我们想要的位置上去。

元素的定位主要包括偏移属性和定位模式来实现。

一、偏移属性

• 说明
  用来描述定位元素各边相对于其包含块的偏移量。

二、定位模式

• 说明
  在CSS中，position属性用于定义元素的定位模式

• 语法

选择器{position:属性值;}

• 属性值

三、静态定位(static)

• 说明 是所有元素在HTML文档流中的默认定位方式。即网页中所有元素都默认的是静态定位， 也就是标准流的特性。

• 语法

{position:static;}

• 注意
  在静态定位模式，无法通偏移属性（top、bottom、left或right）来改变元素的位置。

• PS：设置跟不设置其实一个样儿！

四、相对定位relative

• 说明
  是将元素相对于它在标准流中的位置进行定位，通过设置边偏移属性（left、top、right、bottom值）可将其移至相对于==它自己原来的位置==的定位，不会破坏正常的布局流，它在文档流中的位置仍然保留。

• 语法

{position:relative;}

• 注意

1. 相对定位通过偏移改变位置，但原来的的位置继续占有（人走了，位置还占着）

2. 相对定位是相对于自己来移动位置，以自己的左上角为基点移动。

3. 相对定位不脱标，盒子仍在标准流中。
   如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

五、绝对定位absolute

• 说明
  相对于父级元素的绝对定位，浮出、脱离文档流不占据空间（俗称：脱标），就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。(层叠的顺序z-index:value)

• 语法

{position:absolute }

• 注意
  完全脱标，完全不占位置

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(html文档)。

图片

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

• 说明
  子级是绝对定位的话， 父级要用相对定位。绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
  就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

• 结论
  因为子级是绝对定位，不会占有位置， 所以，可以放到父盒子里面的任何一个地方。
  父盒子布局时，需要占有位置，因此父亲只能是相对定位. 这就是子绝父相的由来。

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

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外边距负的一半值就可以了 margin-left。

六、固定定位fixed

• 说明
  相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不管浏览器滚动条如何滚动，浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

• 语法

{position:fixed;}

• 关键点

1. 固定定位的元素跟父元素没有任何关系，只认浏览器。

2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

七、定位元素的层叠（z-index）

• 说明
  检索或设置对象的层叠顺序。即 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

• 语法

{z-index : auto |number}

• auto：默认值
  number:无单位的整数值，取值可为正整数、负整数和0
  没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

• 注意

1. 属性值后面无单位

2. z-index的默认值是0，大值覆盖小值

3. 取值相同，按书写顺序后写者居上

4. 仅相对定位、绝对定位、固定定位有此属性，其余标准流，浮动，静态定位都无此属性。

八、定位模式转换

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

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