CSS Position (定位) 中 absolute、fixed、relative 的理解+实战（修改）

我的原文地址：https://blog.csdn.net/Dora_5537/article/details/87932957

vue框架下的完整代码如下所示：

<template>
  <div class="relative1">
    <div class="absolute1"><h4>absolute: 第二层</h4></div>
    <div class="absolute2"><h4>absolute: 第三层</h4></div>
    <div class="fixed1"><h4>fixed：第四层</h4></div>
    <h4>relative: 第一层</h4>
    <div class="relative2">
      <div class="absolute3"><h4>absolute：第六层</h4></div>
      <div class="fixed2">
        <el-row><h4>fixed：第七层</h4></el-row>
        <el-row>
          <el-button type="text" style="color:#ffffff;float: right;padding-right: 20px" @click="goBack"><h1>GoBack</h1></el-button>
        </el-row>
      </div>
      <h4>relative：第五层</h4>
    </div>
    <h4>relative: 第一层( 该文字被遮挡，按照文档流位置是在 class="relative2" 的区域块下面 )</h4>
  </div>
</template>

<script>
export default {
  name: 'position',
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  /* relative 相对定位元素的定位是相对其正常位置。
   移动相对定位元素，但它原本所占的空间不会改变。
   相对定位元素经常被用来作为绝对定位元素的容器块。*/
  /* 父元素为<html> */
  .relative1{
    position: relative;
    width: 800px;
    height: 500px;
    background-color: #76c7f4;
    margin: 100px auto;
  }
  /* absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
   absolute 定位使元素的位置与文档流无关，因此不占据空间。
   absolute 定位的元素和其他元素重叠。*/
  /* 父元素为<div class="relative1"> */
  .absolute1{
    position: absolute;
    width: 900px;
    height: 200px;
    background: #7fffd4;
    top: 50px;
  }
  /* 父元素为<div class="relative1"> */
  .absolute2{
    position: absolute;
    width: 1000px;
    height: 200px;
    background: #cbbaff;
    top: 250px;
  }
  /* fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
     fixed 定位使元素的位置与文档流无关，因此不占据空间。
     fixed 定位的元素和其他元素重叠。*/
  .fixed1{
    position:fixed;
    width: 800px;
    height: 200px;
    background: #ff2c2c;
    top:250px;
  }
  /* 父元素为<div class="relative1"> */
  .relative2{
    position: relative;
    width: 400px;
    height: 250px;
    background: #ffffff;
    margin: auto;
  }
  /* 父元素为<div class="relative2"> */
  .absolute3{
    position:absolute;
    width: 450px;
    height: 70px;
    background: #fcff2e;
    top:125px
  }
  .fixed2{
    position:fixed;
    top:125px;
    width: 200px;
    height: 150px;
    background: #ff38d4;
  }
  h4{
    padding-right: 20px;
    float: right
  }
</style>

效果如下图所示：

END

CSS Position (定位) 中 absolute、fixed、relative 的理解+实战（修改）

猜你喜欢