CSS布局方式——定位

定位种类：

定位的特点：

1、相对定位：

2、绝对定位

3、固定定位

4、粘滞定位

定位：高级的布局方式，可以让任何一个元素放在任意位置

定位种类：

position: ;

可选值：

不开定位： static 默认值

开启定位： relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘滞定位

定位的特点：

1、元素的层级会提高

2、绝对定位和固定定位会脱离文档流，相对定位和粘滞定位不会脱离文档流

3、结合偏移量使用

4、参考原点：

相对定位以自身在文档流中的位置

绝对定位以包含块为参考

固定定位以整个页面

粘滞定位：两个阶段

1、未触发粘性边界：类似相对定位（以自身在文档流中的位置）

2、触发粘性边界：最近滚动容器的视口边界

定位应用场景

元素特殊位置需要，切忌滥用

1、相对定位：

开启相对定位：position: relative;

特点：

1、必须要配合偏移量使用，否则元素是不发生任何变化

2、元素不会脱离文档流

3、提高元素的层级

4、参考原点：是其原来在文档流中位置

使用场景：

移动当前元素，跟其他标签无关

偏移量：

left：相对参考原点，正值向右移动，负值向左移动

right：相对参考原点，正值向左移动，负值向右移动

top：相对参考原点，正值向下移动，负值向上移动

bottom：相对参考原点，正值向上移动，负值向下移动

水平方向选一个值，垂直选一个值

css 复制代码

.box {
  width: 600px;
  height: 600px;
  border: 5px solid rgb(56, 56, 56);
}

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: relative;
  left: 200px;
  top: -200px;
}

.box3 {
  width: 200px;
  height: 200px;
  background-color: green;
}

2、绝对定位

开启绝对定位: position: absolute;

绝对定位特点

1、需要结合偏移量使用，调整元素位置

2、脱离文档流，元素原来在文档流中的特点就不存在

3、元素的层级会提高

4、参考原点：以其包含块为参考原点

一般情况下：我们给子元素开启绝对定位，就会同时给父元素开相对定位 "子绝父相"

包含块：

情况一：如何没开定位的话，包含块就是其父元素

情况二：开定位的情况，包含块就是离它最近，开了定位的祖先元素，

如果祖先元素都没开定位，包含块就是根标签

应用场景：一些比较特殊的位置，可以使用，切忌滥用

当position属性值设置为absolute时，则开启了元素的绝对定位

css 复制代码

.box {
  width: 300px;
  height: 300px;
  border: 5px solid blueviolet;
  margin: 50px auto;
  position: relative;
}

.box1 {
  width: 200px;
  height: 200px;
  background-color: orange;
  position: absolute;
  right: 0;
}

3、固定定位

开启固定定位:position: fixed;

固定定位特点

1、需要配合偏移量使用

2、脱离文档流

3、层级提高

4、参考原点：整个页面

5、不会随着滚动条的滚动而滚动

使用场景

侧边栏、广告、登录界面、顶部导航······

html 复制代码

<style type="text/css">
  .outer {
    width: 600px;
    height: 600px;
    border: 5px solid black;
    position: relative;
  }
  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    position: fixed;
    left: 0;
    top: 0;
  }
</style>

<body style="height: 2000px">
  <div class="outer">
    <div class="box1"></div>
  </div>
</body>

4、粘滞定位

开启粘滞定位：position: sticky;

特点

1、元素位置不会发生变化

2、元素不会脱离文档流

3、没有到达top值之前，元素随着滚动条滚动而滚动

当到达top值时，元素就固定不动

注意：只在父元素范围内粘滞，滚动条超过父元素范围，粘滞效果就过去了

使用场景、

顶部搜索框，侧边导航····

css 复制代码

nav {
  width: 500px;
  height: 50px;
  margin: 50px auto 0;
  background-color: #ccc;
  position: sticky;
  top: 10px;
}

.content {
  width: 500px;
  height: 500px;
  background-color: pink;
  margin: 0 auto;
}

html 复制代码

<body style="height: 2000px">
  <nav></nav>
  <div class="content">
    常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
  </div>
</body>

初始状态

到达粘性边界