定位(position)

Posted 2020-11-28

定位(position)

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

为什么要用定位？

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

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

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

一、偏移属性

• 说明

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

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

二、定位模式

• 说明

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

• 语法

  选择器{position:属性值;}

• 属性值

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

三、静态定位(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时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

  <img src=‘imgs/zzz.png‘ />

• 注意

  1. 属性值后面无单位

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

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

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

八、定位模式转换

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

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

四种定位总结

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