一、position 的四個值：static、relative、absolute、fixed。

絕對定位：absolute 和 fixed 統稱為絕對定位

相對定位：relative

預設值：static

二、relative定位與absolute定位的區別

1、relative：相對於原來位置移動，元素設定此屬性之後仍然處在文件流中，不影響其他元素的佈局

<template>
  <div>
    <div class="box1">box1box1box1box1box1box1box1box1 </div>
    <div class="box2">box2box2box2box2box2box2box2box2 </div>
    <div class="box3">box3box3box3box3box3box3box3box3  </div>
    <div class="box4">box4box4box4box4box4box4box4box4  </div>
    <div class="box5">box5box5box5box5box5box5box5box5 </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.box1{
    height: 100px;
    background-color: red;
}
.box2{
    height: 100px;
    background-color: green;
    position: relative;
    left: 50px;
    top:50px
}
.box3{
    height: 100px;
    background-color: blue;
}
.box4{
    height: 100px;
    background-color: yellow;
}
.box5{
    height: 100px;
    background-color: cyan;
}



</style>
 

2、absolute:元素會脫離文件流，如果設定偏移量，會影響其他元素的位置定位

• 說明：元素在沒有定義寬度的情況下，寬度由元素裡面的內容決定，效果和用float方法一樣。

<style lang="less" scoped>
.box1{
    height: 100px;
    background-color: red;
}
.box2{
    height: 100px;
    background-color: green;
    // position: relative;
    left: 50px;
    top:50px
}
.box3{
    height: 100px;
    background-color: blue;
}
.box4{
    height: 100px;
    background-color: yellow;
}
.box5{
    height: 100px;
    background-color: cyan;
    position: absolute;
}



</style>
 

absolute定位原理剖析：

1.在父元素沒有設定相對定位或絕對定位的情況下，元素相對於根元素定位（即html元素）（是父元素沒有）。

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

2.父元素設定了相對定位或絕對定位，元素會相對於離自己最近的設定了相對或絕對定位的父元素進行定位（或者說離自己最近的不是static的父元素進行定位，因為元素預設是static）。

<template>
  <div>
    <div class="container0">最外層容器1</div>
    <div class="container1">第二次容器2</div>
    <div class="container2">
      <div class="box1">box1box1box1box1box1box1box1box1</div>
      <div class="box2">box2box2box2box2box2box2box2box2</div>
      <div class="box3">box3box3box3box3box3box3box3box3</div>
      <div class="box4">box4box4box4box4box4box4box4box4</div>
      <div class="box5">box5box5box5box5box5box5box5box5</div>
      第三層容器
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.container0{
    height: 900px;
    position: absolute;
    background-color: #005599;
}
.container1{
    height: 700px;
    position: relative;
    background-color: #00b4f5;
}
.container2{
    height: 500px;
    position: relative;
    background-color: #2D7091;
}



.box1 {
  height: 100px;
  background-color: red;
}
.box2 {
  height: 100px;
  background-color: green;
  // position: relative;
  left: 50px;
  top: 50px;
}
.box3 {
  height: 100px;
  background-color: blue;
}
.box4 {
  height: 100px;
  background-color: yellow;
}
.box5 {
  height: 100px;
  background-color: cyan;
  position: absolute;
  left: 50px;
  top: 50px;
}
</style>
 

總結

relative：定位是相對於自身位置定位（設定偏移量的時候，會相對於自身所在的位置偏移）。設定了relative的元素仍然處在文件流中，元素的寬高不變，設定偏移量也不會影響其他元素的位置。最外層容器設定為relative定位，在沒有設定寬度的情況下，寬度是整個瀏覽器的寬度。

absolute：定位是相對於離元素最近的設定了絕對或相對定位的父元素決定的，如果沒有父元素設定絕對或相對定位，則元素相對於根元素即html元素定位。設定了absolute的元素脫了了文件流，元素在沒有設定寬度的情況下，寬度由元素裡面的內容決定。脫離後原來的位置相當於是空的，下面的元素會來佔據位置。