css:.demo1{位置：相对；宽度：200px；高度：200px；背景颜色：蓝色；}.demo2{位置：绝对；宽度：100px；高度：100px；background-color:yellow;}添加left:10px;top:50px到demo2;如图：在demo2中添加right:-10px;top:50px;如图：可以看出绝对子容器的位置是相对于相对父容器的。再来看看::after伪元素的情况。我想在文本后面加一个框，代码如下：.demo1::after{content:"";宽度：50px；高度：50px；背景色：红色；但是并没有想要的效果，原来的伪元素默认是inline-box，所以width和height对他不起作用。让我们添加position:absolute;并再次尝试下一行，现在移动伪元素，添加left:0px;top:20px;我们可以看到伪元素像普通块一样移动。现在把demo1变成一个内联元素span，效果如下。向左变化：0px；向右：0px；效果是一样的。第一篇文章结束！