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;

效果也是同样的.

第一篇文章收工！