一.定位概念

1.定位：是一种布局的手段，而且是一种高级的布局手段，

你可以将任何元素，摆放在页面的任意位置

可以用position来设置定位

position可选值：

可选值	种类
static	默认值，不开启定位
relative	相对定位
absolute	绝对定位
fix	固定定位
sticky	粘滞定位

2.定位从两个方面来掌握，

一个方面是如何开启。

另一个方面，开启定位后，它的特点是什么。

二.定位方式

1.相对定位

position：relative 开启了相对定位

相对定位特点：

1、如果不设置偏移量，元素的位置是不发生任何变化

2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

3、设置相对定位后，元素的性质是不发生变化

4、设置相对定位后，元素的层级会提高

5、设置相对定位后，元素是不会脱离文档流

未开启定位时：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        /* 开启了相对定位 */
        /* position:relative;        
        left: 50px;
        bottom: 50px; */

      }

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

      .s1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

未开启定位：开启定位后：

2.绝对定位

position: absolute;开启绝对定位

绝对定位后的特点：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的包含块定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，开启BFC属性

内联元素变成行内块元素，

块元素的宽度和高度默认都被内容撑开

代码：

      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;

      }
      .box2 {
        width: 250px;
        height: 250px;
        background-color: red;
      }
      .box3{
        width: 300px;
        height: 300px;
        background-color: pink;

      }
      .box4{
        width: 250px;
        height: 250px;
        background-color: purple;
      }

未设置定位时：

设置box1绝对定位的right 0；bottom 0；时，他会根据离他最近的开启了定位的祖先元素。开启定位如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。

注意：

为了更好的控制子元素的位置，我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位。

包含块：containing block

正常情况下：

离当前元素最近的祖先块元素

定位情况下：

离他最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

CSS布局:定位

一.定位概念

二.定位方式