最近接到了一个需求如下：
需求
拿到需求一看，顿时感觉非常简单，无非就是定位，伪元素之流的方法。于是就有了以下代码：
html部分
<div class="demo-wrapper">
<span class="text-wrapper">
<span class="spot spot-left"></span>
<span class="text">背景斑点</span>
<span class="spot spot-right"></span>
</span>
</div>
css部分
.demo-wrapper {
text-align: center;
}
.text-wrapper {
position: relative;
}
.text-wrapper > .spot {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
.spot-left {
position: absolute;
bottom: -5px;
left: 0px;
background: #60ff00;
}
.spot-right {
position: absolute;
top: -5px;
right: 0px;
background: #e500ff;
}
结果一看：
非预期效果
emmmm，资料一查，原来是position属性的问题，position属性会让该元素脱离文档流从而导致文字被遮挡。
解决方法：
我们可以利用position的特性，均为动态定位的兄弟元素间，靠后的居上。
修改后的html
<div class="demo-wrapper">
<span class="text-wrapper">
<span class="spot spot-left"></span>
<span class="spot spot-right"></span>
<span class="text">背景斑点</span>
</span>
</div>
添加css
.text {
position: relative
}
这样就能达到预期效果了。
