CSS（样式-定位） 笔记 06

position: ;定位

1.static 代表静态模式，常态模式

2.fixed  代表固定模式

特点：不随浏览器的滚动而滚动，释放掉自己原来的空间,参照物是整个浏览器

3.absolute 代表绝对模式

特点：随浏览器的滚动而滚动，释放掉自己原来的空间,参照物是整个浏览器

4.relative 代表相对位置

特点：随浏览器的滚动而滚动，保留自己原来的空间，参考物是自己之前的位置

5.结合模式：父级元素使用relative，子元素使用absolute

特点：子元素随浏览器的滚动而滚动，释放掉自己的空间,参考物是父级

6.与定位配套的方位属性left,right,top,bottom，但定位的取值必须是fixed，absolute，relative中的一项

7.与定位配套的层次属性z-index,调整，值越小越靠下，值越大，越靠上

.container{
    width:600px;
    height:1000px;
    background:#81ecec;
    position: relative;
    /* 父级添加此标签 */
}

.top{
    width:100px;
    height:100px;
    background:#482f82;
    position: absolute;
    /* 子元素，参照物是父级 */
    top:200px;
    left:100px;
}

.middle{
    width:300px;
    height:100px;
    background:#9b185a;
    position: absolute;
    top:200px;
    left:100px;
}

.bottom{
    width:100px;
    height:300px;
    background:#a29bef;
    position: absolute;
    top:200px;
    left:200px;
}