CSS position定位属性，Absolute和Relative的区别_css定位 absolute和relative区别-优快云博客

首先我们设置4个div

<body>
     <div id="div1">我是div1</div>
     <div id="div2">我是div2</div>
     <div id="div3">我是div3</div>
     <div id="div4">我是div4</div>

 </body>

当不设置定位时：
在这里插入图片描述

position属性

CSS定位属性允许我们为一个元素定位，有五种值：

1. Static

默认值，没有定位，元素在正常的文档流中，不会受到top,bottom,left.right的影响。
当给div2设置静态定位时，top,left都失效

#div2{
position: static;
top: 12px;
left: 20px;
}

2.Fixed

元素的位置相对于浏览器窗口是固定位置，也就是说将元素固定在窗口的某个地方，即使窗口滚动，它也不会移动
有固定定位的元素，脱离了文档流，所以不占据空间
固定定位的元素和其他元素可重叠
当给div1设置一个大一点的高度，让滚动条出现，给div2设置固定定位，往下滑动时，div不会动

#div2{
 position: fixed;
 top: 12px;
 left: 20px;
 }

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201118193723478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDM1NDAz,size_16,color_FFFFFF,t_70#pic_center

3.Relative

Relative定位又叫相对定位，是相对于其原来的位置来定位的
相对定位元素经常被用来作为绝对定位元素的容器块
给div2设置相对定位时，可以看到他的位置是距离他原本没有定位时的位置来定位的

#div2{
position: relative;
top: 20px;
left: 30px;
             }

4.Absolute

绝对定位是相对于最近的且不是static定位的元素来定位的，要是父元素都没有定位，就是相当于html定位
给div2设置绝对定位的时候，这里是相对于html定位的,

#div2{
position: absolute;
top: 20px;
left: 30px;
}

在这里插入图片描述

5.Inherit

继承父元素的position值。

<body>
     <div id="div1">我是div1</div>
     <div id="div2">我是div2
         <div id="div21"></div>
     </div>
     <div id="div3">我是div3</div>
     <div id="div4">我是div4</div>

 </body>

         #div2 {
             text-align: center;
             height: 100px;
             background-color: blanchedalmond;
             position: absolute;
             top: 20px;
             left: 30px;


         }

         #div21 {
             position: inherit;
             width: 200px;
             height: 50px;
             background-color: ivory;
         }