absolute和relative的位置关系与伪元素

实验出真理
1.

html:

<div class="demo1">
    <div class="demo2"></div>
</div>

css:

.demo1 {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: blue;
}
.demo2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

对demo2添加left:10px;top:50px;如图：

对demo2添加right:-10px;top:50px;如图：

可知absolute子容器的位置是相对于relative父容器的.

再看看::after伪元素的情况，我想在文本后加一个方块，代码如下：

.demo1::after {
            content: " ";
            width: 50px;
            height: 50px;
            background-color: red;
        }

却没有想要的效果，

原来伪元素默认是inline-box,所以宽高对他无效．我们加上position: absolute;再试下

这下行了，现在移动伪元素，加上left:0px;top:20px;

可知伪元素与普通的块一样移动．
现在将demo1变成内联元素span效果如下

将left:0px;改为right:0px;

效果也是一样的.

第一篇文章收工！