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;

效果也是同樣的.

第一篇文章收工！