当我给颜色2(div)的绝对位置，而颜色1是相对的突然消失的边界底部

Question

当我给颜色2(div)的绝对位置，而颜色1是相对突然消失border-bottom

.color1 {
position: relative;
border-bottom: 2px dotted;
display: inline-block;
}
.color2 {
position: absolute;
}

<div class="color1">muthu
<span class="color2">dinesh</span>
</div>

Answer 1

尝试为border-bottom指定颜色。否则不同的浏览器会为你做决定。

border-bottom: 2pxred虚线;

Answer 2

因为你的。color1现在是相对的和。color2 (span元素是绝对的)，你的。color1 (div元素)的宽度只考虑…所以.color1 + .color2 = width of .color2 only的宽度你也需要给。color2添加边框!

为了证明我的观点，你可以制作.color1 { display : block}之后你可以清楚地看到发生了什么

Answer 3

当您将子span的位置设置为绝对时，包含的块将成为父的框，这就是为什么它不会显示边框的原因。最简单的解决方案是在span上设置border: inherit;:

.color1 {
position: relative;
border-bottom: 2px dotted;
display: inline-block;
}
.color2 {
position: absolute;
border: inherit;
}

<div class="color1">muthu
<span class="color2">dinesh</span>
</div>