CSS四种定位方式

CSS布局的四种定位方式

1、static（静态定位）：

设置方式为position:static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2、relative (相对定位) ：

设置方式为position:relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。

两个相对定位的盒子，默认的情况下第二个盒子层级比第一个盒子层级高，即第二个盒子可以覆盖第一个盒子，如果想让第一个盒子覆盖第二个盒子，可以通过设置z-index属性实现。

举例:

    <style>
        .static1{
   
            width: 100px; 
            height:80px; 
            background-color: red;
        } 
        .relative{
    
            width: 100px;
            height:80px; 
            position:relative; 
            top:40px; 
            left:40px; 
            background-color: black;
            } 
        .static2{
    
            width: 100px;
            height:80px; 
            background-color: blue;
         }
    </style>
</head