前端 - 绝对定位元素为什么要用一个空的div包裹？

Question

经常看到绝对定位元素有一个空的div包着，其实是可以省略的，为什么这么写？，这么做是为了什么？

下面是例子

1. https://ant.design/components/modal-cn

2. https://robertsspaceindustries.com/starmap

Answer 1

虽然问题已被采纳，不过还是感觉没有理解为什么，最终问了下chatgpt，给出以下解答【仅供参考】：

绝对定位元素在网页布局中，不会影响其他元素的位置，而是根据其父元素或者最近的祖先元素进行定位。为了在绝对定位元素的上方或下方添加内容，我们可以使用一个空的 <div> 元素作为包裹。

以下是几个原因解释为什么需要使用一个空的 <div> 元素来包裹绝对定位元素：

1. 创建块级格式上下文（Block Formatting Context）：当一个元素被设为绝对定位时，它会脱离文档流，并且可能会破坏原有的布局。在这种情况下，使用一个空的 <div> 元素来包裹绝对定位元素可以创建一个新的块级格式上下文，使得布局更加可控。
2. 确保准确的定位：绝对定位元素的定位是相对于其最近的定位上下文（positioned context）而言的。如果没有合适的父元素或祖先元素用来作为定位上下文，那么绝对定位元素的定位可能会出现错误。通过使用一个空的 <div> 元素包裹绝对定位元素，我们可以显式地定义定位上下文，以确保准确的定位。
3. 添加附加内容：有时候我们可能要在绝对定位元素的周围添加其他内容，如背景色、边框或者额外的文字。通过使用一个空的 <div> 元素作为包裹，我们可以在其中插入其他元素或文本，而不影响绝对定位元素的位置。

总之，使用一个空的 <div> 元素来包裹绝对定位元素主要是为了创建块级格式上下文、确保准确的定位和便于添加附加内容。这样可以提高布局的可控性和灵活性。

这样一套解释下来，感觉更加清晰~mark~

Answer 2

有没有可能是写组件的习惯先写个div包着；我试了试去掉无影响

Answer 3

猜测有可能是以前react没有fragment这样的标签，组件中只能有一个根节点，所以写成了这样。

当然也有可能是为了实现某种特殊的功能，比如焦点的控制而单独写的一层div

还有可能就是开发人员根本不在乎原生 HTML 结构，就像楼上说的，习惯先写个 div 包着，只要最终组件没有什么问题就行了