详解css的四种定位方式

详解四种定位方式

所谓定位，既是指手动控制元素在包含块中的精确位置。
定位（position）=定位模式+边偏移。
边偏移：定义元素相对于父级上线的位置。

• top
• botton
• left
• right
  定位模式：选择器{position：属性值；}
  1、 静态定位（static）
  static定位，也叫静态定位，是元素默认的定位方式，它遵循正常的文档流，占用文档空间，该定 位方式下，top、right、bottom、left、z-index等属性是无效的。

 <style>
        .box{
    
            border: 1px solid royalblue;
            width: 300px;
        }
        .box1{
    
            width: 100px;
            height: 100px;
            background-color: saddlebrown;
          
           
        }
        .box2{
    
            width: 100px;
            height: 100px;
            background-color: seagreen;