应用相对和绝对定位时的不同边框

Question

我们有一个标记

<span>Text 
    <div>text</div> Text 
    <div>text</div> text 
</span>

和样式

span{
    position:relative;
    top:100px;
    border: 1px dashed black;
}
div{margin:50px;}

没关系。 span元素生成的内联框分为三个框。 jsFiddle。但是如果我们将span的定位方案更改为绝对，我们就会看到span的边框包含div个元素和span中的文本。 jsFiddle

问：为什么在我的情况下定位方案会受到跨度边界的影响？

Answer 1

这是您的解决方案

Span是内联元素所以

仅占用所需的宽度，并且不强制换行

使用此css

span{
    position:relative;
    top:100px;
    border: 1px dashed black;
    display: inline-block
}

这是小提琴http://jsfiddle.net/krunalp1993/6v5XG/3/

更多信息reference

希望它可以帮助你：）

Answer 2

span是一个内联元素，因此没有与之关联的定位上下文给它hasLayout。您需要将span更改为使用inline-block才能将其设为hasLayout。这篇文章很好地解释了http://www.brunildo.org/test/ap_contbox1.html