材料/工具：电脑、CSS3、HTML5、HBuilder、浏览器、截图工具
1、双击打开HBuilder编辑工具，新建静态页面position.html，修改title标签内的内容。
2、在<body></body>标签元素内插入一个<div></div>标签，设置其id属性值为pos。
3、利用ID选择器设置div元素宽度和高度都为300px，背景色为#666666，position为absolute。
4、保存代码并预览界面，发现页面展示的正方形边框在左上角。
5、修改top、left、margin和padding，让div元素垂直居中。
6、设置div标签元素border-radius和background渐变属性即可。
首先要更正一下，不存在first-of-child的，只有first-of-type下面就说说first-child与first-of-type的区别：
first-child：父元素的第一个子元素且必须符合指定类型
first-of-type：父元素的符合指定类型的第一个子元素
当然，光看文字也是很难理解的，下面看看例子：
<div>
<p>第1行</p>
<p>第2行</p>
<p>第3行</p>
</div>
这种情况下，不管是p:first-of-type还是p:first-child，<p>第1行</p>都会被选中。
而如果是：
<div>
<i>第1行</i>
<p>第2行</p>
<p>第3行</p>
<p>第4行</p>
</div>
则p:first-of-type的话，<p>第2行</p>会被选中；
而p:first-child的话，将没有任何元素被选中！
首先明确几个概念：静态定位：position:static
动态定位：position:relative
祖元素：任意包含该元素的元素
父元素：直接包含该元素的祖元素
同辈元素：拥有共同的父元素的元素
法则一：同辈元素定位方式相同时，且无z-index设置时，html靠后者居上
法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上
三：同辈元素定位方式不同，动态定位居上
四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上
五：非同辈元素，任意一者或其祖元素拥有动态定位，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素或其本身进行比较
1. 子元素的z-index无论多大，父元素者居上
2. 父元素居下，子元素也可以居上
父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已与position：staic无关，而其祖元素却可通过html的位置来进行比较
