css三种定位体系

在CSS中，有三种重要的定位体系，分别是静态定位、相对定位和绝对定位。这三种定位方式的使用场景各不相同，具体如下：

 .static{
        position: static;
    } 

静态定位（position: static）是CSS的默认定位方式，元素会按照其在HTML中的位置进行渲染。这种方式不会受到其他定位的影响，无法进行偏移或层级控制。

 .relative{
        position: relative;
        left: 20px;
        top: 30px;
    } 

相对定位（position: relative）相对于元素在静态定位时的位置进行偏移，并不会影响其他元素的位置。可以通过left、right、top、bottom等属性进行偏移，使元素出现在正确的位置。通过z-index属性可以控制元素的层级顺序。

 .absolute{
        position: absolute;
        left: 0;
        top: 0;
    } 

绝对定位（position: absolute）相对于其最近的非静态定位祖先元素的位置进行定位，如果没有则相对于body进行定位。通过left、right、top、bottom等属性进行偏移，并可以通过z-index属性控制元素的层级顺序。绝对定位的元素会脱离文档流，不占据空间，如果在文档中的位置发生变化，则需要手动调整其定位。

以上就是CSS三种定位体系的介绍，根据实际情况选择不同的定位方式可以使页面实现更复杂的布局效果。