css中的四种定位方式：static relative abso

引子：相对定位和绝对定位的区别

static:静态定位，元素定位的默认值，表示元素在文档流中正常存在的位置，忽略各种定位值如top left等和z-index

relative：相对定位，相对的是元素本来在文档流中的初始位置。通过设置top、left等定位属性来设置元素相对于自身位置的偏移。
写个代码：
页面：

    <div class="main">
        <div class="parent">
             
        </div>
    </div>

样式：

        .main{
            width:500px;
            background:#00f;
        }
        .parent{
            position:relative;
            right:0;
            bottom:0;
            background:red;
            height:300px;
            width:300px;
        }

image.png

是不是觉得和预期的不太一样，红色块应该右边对齐蓝块啊，别急，我们将right:0 bottom:0改为right:10px;bottom:10px看一下

image.png

红色块相对于自己原来的位置向上向右移动了10px，这就是为什么说top、left、right、bottom设置的值是元素相对于自身的偏移。

相对定位的元素，可以设置z-index的值，即使不设置，元素也会显示在静态定位的元素上方。

absolute：绝对定位，相对的是其最近的定位为relative或者absolute的父元素。通过设置top、left、right、bottom等设置其相对于父元素的定位。注意，absolute不会相对于定位为float的元素偏移。

fixed：固定定位，相对的是视窗或者浏览器窗口。页面滚动时，视窗是不会改变的，所以固定定位的元素位置不会发生改变。