【CSS】Position 定位_css position: absolute-CSDN博客

本文链接：https://blog.csdn.net/Dora_5537/article/details/87932957

一个完整的页面是由很多个页面堆积形成的，如下图所示。

那么如何实现页面的堆积，就需要CSS中position的定位属性了。

position 属性指定了元素的定位类型，共有五个值，分别是

点击上述五个值可直接跳转到菜鸟教程的CSS Position (定位)篇章。

这里，我只重点说 absolute、fixed、relative 三个值。

1.absolute

absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

2. fixed

fixed元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

fixed 定位使元素的位置与文档流无关，因此不占据空间。

fixed 定位的元素和其他元素重叠。

我们可以发现 fixed 与 absolute 只是第一条不同。

3.relative

relative相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

4.sticky

参看实例：http://www.runoob.com/try/try.php?filename=trycss_position_sticky 就会一清二楚。

5.static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right 影响。

其他四个值则都受 top, bottom, left, right 影响。

实战

我单独写了页面来展示position的 absolute、fixed、relative 三个值，注释写的也很清晰，大家细细看吧，我就不啰嗦了。

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>

效果如下图所示：

注：1. 第二、三、四层会始终覆盖在第一层的两部分文字的上方；2. 在HTML文档中，如果第二、三、四层写在第五、六、七层的前面，则如上图所示，位于第五、六、七层的下方；否则，第二、三、四层将覆盖在第五、六、七层的上方。

总结

1. Position 属性的五个值：absolute、fixed、relative、static、sticky。

2. absolute

absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

3. fixed

fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
fixed 定位使元素的位置与文档流无关，因此不占据空间。
fixed 定位的元素和其他元素重叠。

我们可以发现 fixed 与 absolute 只是第一条不同。

4. relative

relative 相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

5. static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right 影响。其他四个值则都会受 top, bottom, left, right 影响。
静态定位的元素会受到 margin, padding 影响。

6. sticky

sticky 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
粘性定位元素的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。
粘性元素的定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

END