关于一个伪类和position的疑问？

Question

在做百度前端技术学院里面一个任务的时候发现一个不能理解的问题；任务效果图如下：需要完成如下布局

下面是我写的代码：

html:

<div class="container">
        <div class="box">
            <div class="left circle"></div>
            <div class="right circle"></div>
        </div>
</div>

css:

*{
    padding:0;
    margin:0;
}


.container{
    background:#eee;
    height:500px;
    position:relative;
}
.box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:auto;
    width:400px;
    height:200px;
    background:#CCCCCC;
}
.box:after{ 
    content:'';
    display:block;
    position:relative;
}
.circle{
    width:50px;
    height:50px;
    background:#FFCC00;
}
.left{
    position:absolute;
    left:0px;
    top:0px;
    border-radius:0 0 100% 0;
}
.right{
    position:absolute;
    right:0px;
    bottom:0px;
    border-radius:100% 0 0 0;
}

我的疑问：首先说明上面的代码确实实现效果
由于在类box中我已经使用了一次position属性，然后我就想用伪类来实现定位；
但是问题来了，我这里:after并未设置高度，只是一个空元素，在控制台查看到的高度也是0，那么bottom和right等属性又是相对于那个元素？

Answer 1

bottom和right属性是相对于box的。为什么实现相对于box呢？left和right设置了position为abolute。{positio:abolute}的作用：相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。在你的代码中，最接近left和right的是具有定位属性的父包含快是box，所以bottom和right等属性是相对于box的。
:after并没有起任何作用，并且没有对结构造成影响。

Answer 2

你代码里的

.box:after{ 
    content:'';
    display:block;
    position:relative;
}

是没有任何意义的，你的代码中能实现效果是因为下面代码中有position: absolute。

.box{
    position:absolute;

所以left和right都是相对于box的。

Answer 3

.left和.rigth和.box都定义position:absolute属性。这里.box是.left和.right的父级元素，定义的bottom和right属性是相对于父级box的。
.box:after{

content:'';
display:block;
position:relative;

}
这里这个伪类样式没有任何意义啊，删掉，效果也是在的。

Answer 4

相对于.box的绝对定位而言的。box有宽和高度。