一、今天完成的事情

突然忘记了绝对定位和相对定位的区别，今天重新看了看

1、position：absolute

绝对定位：绝对定位 是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么他的位置则是相对于最初的包含块（也就是body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。

#div1 {

        width:150px;

        height:200px;

        background:green;

        position:absolute;

        left:100px;}/*由于div1没有已定位的祖先元素，因此此处div1的位置是以body为准*/

    #div1 span {

        position:absolute;

        width:20px;

        height:60px;

        line-height:20px;

        background:blue;

        right:-20px;/*绝对定位：以父类的位置为标准，也就是以div的位置为准，会在div1右边的20px出现span */

        top:70px;}

2、相对定位

position：relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

    #div1 {

        width:150px;

        height:200px;

        background:green;

        position:relative;

        left:100px;}

    #div1 span {

        position:relative;

        width:20px;

        height:60px;

        line-height:20px;

        background:blue;

        right:-20px;/*相对定位：以它最初的位置为准，因为div是它的父类，所以它最初位置是在div1内，然后现在会在div1内部距离右边20px，距离div顶部70px处出现span */

        top:70px;}

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式进行显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，再单独设置display:inline; display:block都是无效的。

二、遇到的困难

暂时没有

三、明天要做的事情

任务十二

四、收获

加深了对绝对定位和相对定位的理解，对于基础知识的掌握更加透彻。