1. Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位

 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

 Relative：相对定位，是相对于其原本的位置来定位的。

 Static：默认值，没有定位。

 Inherit：继承父元素的position值。

初始设置四个div

<body>
	<div class="sun1">sun1</div>
	<div class="sun2">sun22222</div>
	<div class="sun3">sun3</div>
	<div class="sun4">sun4</div>
</body>

在这里插入图片描述

1. 子元素absolute

.sun2{
    position: absolute;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color:cadetblue
}

第二个元素设置absolute, 脱离文档流，宽度由文字sun2222撑开，top跟left根元素即html元素来定位

2.子元素relative

.sun2{
    position: relative;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color:cadetblue
}

设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位, 宽度还是原来父级的宽度

在这里插入图片描述

3.子元素设置一个父级absolute, 子元素absolute

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

<div class="sun1">sun1</div>
      <div class="sun">
        这里是sun22222的父元素
        <div class="sun2">sun22222</div>
      </div>
      <div class="sun3">sun3</div>
      <div class="sun4">sun4</div>

sun2就会相对于父sun的div来定位。子元素sun 宽度由文字sun22222内容撑开决定

3-1

子元素sun2222 设置一个500px，宽度不会把父元素撑开

3-2

4.子元素设置一个父级absolute, 子元素relative

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: relative;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

sun2就会相对于父sun的div来定位。子元素sun2222 宽度与父元素相同

4-1

父级absolute, 子元素relative，子元素sun2222 设置一个500px，**子元素宽度会把父元素撑开**

4-2

5.子元素设置一个父级relative, 子元素absolute（常用）

.sun{
      position: relative;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      width: 500px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

子元素定位相对于父元素

5-1

子元素定位相对于父元素，子元素设置宽度不会影响父元素

5-2

总结：

absolute: 会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。
relative: 不会脱离文档流，定位是相对于原本自身的位置，若没有宽度，那么宽度为父元素宽度，该元素的宽度会影响父元素的的大小