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

问题描述

问 题

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

下面是我写的代码：

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等属性又是相对于那个元素？

解决方案

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

这篇关于css - 关于一个伪类和position的疑问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！