当应用相对和肌的定位时，不同的边界

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的定位方案更改为绝对，我们将拥有跨度的边框封闭的div元素和跨度内的文本。jsfiddle。

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

Answer 1

这是您的解决方案

跨度是内联元素，所以

仅占用所需的宽度尽可能多，不会强迫新线

使用此CSS

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

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

更多信息参考

希望它对您有帮助：）

Answer 2

a span是一个内联元素，因此没有与之相关的定位上下文来给予它。您需要更改span以使用inline-block才能提供哈西亚。本文很好地解释了它http://www.brunildo.org/test/ap_contbox1.html