position的五种定位方式介绍、实例演示

本文链接：https://blog.csdn.net/weixin_43183219/article/details/122147894

position是css为某些元素提供定位的属性，它有五种常规取值，本篇文章将会详细介绍。

1.静态定位

静态定位：position取值为static，他是HTML文档元素的默认值，不受top、bottom、left、right属性影响，并且不能进行z-index分层，元素在正常的文档流中。
代码演示：

<style>
      div{
     
          background-color: gray;
          width: 400px;
          height: 300px;
          top: 400px;
          left: 400px;
      }
</style>
<body>
    <div>

    </div>
    
</body>

网页展示效果：
静态定位展示效果

2.相对定位

相对定位：当position取值为relative时，该元素为相对定位，相对自身位置定位，不会脱离文档流，可以使用z-index进行分层。它可以根据文档正常流动偏移相对于它本身top、bottom、right和left的值，偏移量不会影响其他元素的位置。
静态定位是默认值，以下示例用图1为静态定位、图2为相对定位，对比理解
代码展示：

<style>
      .a1{
     
          background-color: gray;
          width: 400px;
          height: 300px;
          top: 400px;
          left: 400px;
      }
      .a2{
     
        background-color: