1、为什么使用定位了

1. 小黄色块在图片上移动，吸引用户的眼球。

在这里插入图片描述

2、什么是定位了

将盒子定在某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面。

3、定位的构成

定位也是用来布局的，它有两部分组成：

在这里插入图片描述

3.1、边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

3.1.1、top

top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

3.1.1.1、属性值

<length>

可以是负的，正的或者 null 表示；

<percentage>

代表元素包含块的高度的百分比。

auto

这个关键字表示：

3.1.1.2、注意点

top的效果取决于元素的position属性：

当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，top属性的效果和position为relative等同；如果元素在viewport外面，top属性的效果和position为fixed等同。
当position设置为static时，top属性无效。

3.1.2、right

right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。

3.1.2.1、属性值

<length>

可以是负的，正的或者 null 表示：

<percentage>

代表元素包含块的宽度的百分比。

auto

这个关键字表示：

3.1.2.2、注意点

right的效果取决于元素的position属性：

当position设置为absolute或fixed时，right属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
当position设置为relative时，right属性指定了元素的右边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，right属性的效果和position为relative等同；如果元素在viewport外面，right属性的效果和position为fixed等同。
当position设置为static时，right属性无效。

3.1.3、bottom

bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。

3.1.3.1、属性值

<length>

一个负值、空值或正值，代表了：

<percentage>

包含块高度的百分比。

auto

规定：

3.1.3.2、注意点

bottom的效果取决于元素的position属性：

当position设置为absolute或fixed时，bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
当position设置为relative时，bottom属性指定了元素的下边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，bottom属性的效果和position为relative等同；如果元素在viewport外面，bottom属性的效果和position为fixed等同。
当position设置为static时，bottom属性无效。

3.1.4、left

left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。

3.1.4.1、属性值

<length>

可以是负的，正的或者 null 表示：

<percentage>

代表元素包含块的宽度的百分比。

auto

这个关键字表示：

3.1.4.2、注意点

left的效果取决于元素的position属性：

当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，left属性的效果和position为relative等同；如果元素在viewport外面，left属性的效果和position为fixed等同。
当position设置为static时，left属性无效。

3.1.5、注意点

注意：

top 和 bottom 不要同时使用；
left 和 right 不要同时使用。

3.2、定位模式（position）

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 {
  position: 属性值;
}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

在这里插入图片描述

3.2.1、静态定位（static）

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的 none，不要定位的时候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的。

3.2.2、相对定位（relative）

相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）

效果图：

在这里插入图片描述
相对定位的特点：

相对于自己原来在标准流中位置来移动的。
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

3.2.3、绝对定位（absolute）

绝对定位是元素以带有定位的父级元素来移动位置。（拼爹型）

完全脱标——完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。

在这里插入图片描述

父元素要有定位

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

绝对定位的特点：
绝对是以带有定位的父级元素来移动位置（拼爹型），如果父级都没有定位，则以浏览器文档为准移动位置。
不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相

后面我们再讲解定位口诀的由来。

3.2.4、固定定位（fixed）

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形，那么固定定位就类似于正方形。

完全脱标——完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

提示：IE6等低版本浏览器不支持固定定位。

注意：

在使用固定定位时，如果盒子中没有内容，需要指定宽度

固定定位的应用场景：
固定在浏览器可视窗口某个位置的布局；

3.2.5、粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

通俗来讲就是设定了top、bottom、left、right了，超过这个值为为固定定位。

#one {
  position: sticky;
  top: 10px;
}

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

应用场景：

示例：

  <div class="box">
  </div>

* {
  padding: 0;
  margin: 0;
}

body {
  height: 2000px;
}

.box {
  position: sticky;
  top: 10px;
  margin: 100px auto;
  width: 30px;
  height: 90px;
  background-color: pink;
}