今天完成了什么：

完成了任务三总结。

完成任务四头部标签结构分布。

了解position定位属性。

遇到了什么问题：

写任务四布局分析一开始错了，用header标签成了div块元素标签导致字体由上往下排列；

在字体width宽设置的太小，导致字体只能放一个，字体由上往下排列

box1盒子背景颜色宽度一开始没留心设置了固定值，没铺满，后来改了100%铺满了。

在使用position：relative的时候没配合偏移量使用，导致没效果，写日报后从兴整理了以便。

明天完成什么：

完成任务四部分，尽快掌握position属性，flex属性。

今天收获了什么：

元素可以使用的顶部、底部、左侧、右侧属性定位，在HTML元素的默认值，是没有定位的，即常规流，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。

position: absolute;  <!-- 绝对定位 --> 

position: relative;  <!-- 相对定位 --> 

position: fixed;     <!-- 固定定位 -->

相对定位：

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

例子：

position: relative;

 left: 50px; top: 50px;

相对定位不脱标

相对定位：不脱标，老家留坑，别人不会把它的位置挤走。

也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。相对定位的用，如果想做“压盖”效果（把一个div放到另一个div之上），相对定位来做。相对定位，就两个作用：

（1）微调元素

（2）做绝对定位的参考，子绝父相

相对定位的定位值：left：盒子右移；right：盒子左移；top：盒子下移；bottom：盒子上移；负数表示相反的方向。

绝对定位：

定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。绝对定位脱离了标准盒子文档流，绝对定位都不遵守，用了绝对之后，标签不区分行内会计元素，不需要display：block就可以设置宽跟高。

格式举例如下：

position: absolute;  /*绝对定位*/

left: 10px;  /*横坐标*/

top/bottom: 20px;  /*纵坐标*/

如果用top，参考点就是页面的左上角，整个网页的左上角，而不是浏览器显示器的左上角；

如果用bottom描述，那么参考点就是首屏上，即没有滚动的页面上。

绝对定位特点：

1.脱离常规流

2.设置偏移量的时候百分比是根据最近的定位祖先元素来变动的。

3.lrtb偏移量为0，他讲对其到最近定位祖先元素的各个边上，所以可以理解为居中。

4.如果letb偏移量为auto，将打回原形。

5.绝对定位指的是相对定位元素，以相对定位了的元素作为靶心移动。

fixed固定定位：

作用：

特点：固定定位后的元素不会因为滚动而滚动一直停留在显示器窗口上，这个盒子显示的位置不变。

用途1：网页右下角的“返回到顶部”

用途2：顶部导航条，我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。

z-index属性：

表示谁压着谁。数值大的压盖住数值小的。

特点：

属性值大的位于上层，属性值小的位于下层。

z-index值没有单位，就是一个正整数。默认的z-index值是0。例如z-index：99

如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。