如何完全包裹一个绝对定位的div元素，使用相对定位的div元素？

Question

是否可以在不定义外部相对定位div的高度和宽度像素值的情况下完全包裹内部绝对定位div？在这里，我看不到"outerrelativediv"的红色边框覆盖在"innerabsolutediv"周围。

<div id="outerrelativediv" style="position:relative;display:inline-block;border:1px solid red;">
  <div id="innerabsolutediv" style="position:absolute;display:inline-block;">
    SOMETEXT HERE!!!
  </div>
</div>

https://jsfiddle.net/L3bytwnj/

- sommeguyy

---

那么内部为什么要绝对呢？让它也相对吧。 - vp_arth

不行，不能没有给它高度，或者至少让它从另一个正常流的子元素那里获取高度。 - TylerH

没有任何原因，我只是好奇是否可能？ - sommeguyy

当然不是。Absolute用于相对定位，您可以将其移动到内部，拉伸到容器大小，但不能更改容器大小。绝对块不在内容流中。 - vp_arth

绝对（和固定）位置采用流的元素，所以您所尝试的不起作用。在父容器中单独使用内联块就可以了（内联表、表格、表格单元格、内联弹性或浮动或绝对或固定也行）。这与CSS中的定位有关（显示、浮动、位置、方向等）。 - G-Cyrillus

Answer 1

简单的回答是：不行。

当你给一个元素设置了position: absolute;属性，它就会被从正常内容流中移除。如果它是父元素的唯一子元素，那么父元素将没有任何内容。它将是空的。

通常，空的html元素有0的width和height值，并且不在正常内容流中占用空间。有些例外情况可能导致空元素被渲染，例如作为伸展其子元素的flex父元素的子元素。但在一系列父级链中，其中之一必须具有设置的尺寸或至少具有一些内容（可能在兄弟链中）以生成一些高度/宽度，否则它们都将只是一大堆未呈现的空元素。

此外，子元素上的padding和border属性会产生对父元素的宽度/高度影响，即使该子元素没有内容。

- tao