css入门8：定位

最新推荐文章于 2025-05-07 14:36:36 发布

原创最新推荐文章于 2025-05-07 14:36:36 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例展示了如何使用CSS的各种定位方式，包括固定定位、相对定位、绝对定位和粘性定位，并解释了如何设置top、bottom、left、right和z-index等属性来实现元素的精确布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、指定position属性(static/fixed/relative/absolute/sticky)

2、指定top,button,left,right属性

3、指定overflow属性

4、指定堆叠顺序z-index

<html>

<head>
  <style>
    p.pos_fix {
      position: fixed;
      top: 30px;
      right: 5px;
    }


    p.pos_rel {
      position: relative;
      left: 20px;
      top: -40px;
      color: red;

    }

    p.pos_abs {
      position: absolute;
      left: 100px;
      top: 150px;
    }

    div.pos_sticky {
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: lightgrey;
      border: 2px solid red;
    }

    img{
      position:absolute;
      left:0px;
      right:0px;
      z-index: -1;

    }

  </style>



</head>


<body>

  <p class="pos_fix">
    this is position fixed
  </p>


  <p>
    this is position relative
  </p>
  <p class="pos_rel">
    this is position relative
  </p>


  <p class="pos_abs">
    this is position absolute
  </p>


  <div class="pos_sticky">
    this is position stick
  </div>


<img src="my_logo.png"/>

  <div style="height:2000px;background-color:grey;">
    需要滚动才能体现出效果。
  </div>






</body>

</html>