Html 应用相对和单独定位时的不同边界

让我们有一个加价

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

没关系。由

span

元素生成的内联框正在拆分为三个框。但是，如果我们将

span

的定位方案更改为绝对，则span的边界包含

div

元素和span内的文本

问：在我的例子中，为什么定位方案会影响跨度的边界？

这是您的解决方案

Span是内联元素，所以

只占用所需的宽度，并且不强制创建新行

使用这个css

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

这是小提琴

更多信息

---

希望它能帮助您：）

A

span

是一个内联元素，因此没有与之关联的定位上下文来为它提供布局。您需要将

span

更改为使用

内联块

，以使其具有布局。这篇文章很好地解释了这一点

如果这对你有帮助，请接受这个答案。：）

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