絶対位置divを相対位置divで完全にラップする方法は？

Question

外部相対位置divの高さと幅のピクセル値を定義することなく、絶対位置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/

Answer 1

簡単な答えは次のとおりです。なし。

あなたが要素position: absolute;を与えるとき、それはの通常の流れからを取る。親の唯一の子である場合、親にはフローの内容はありません。それは空になります。

通常、空html要素は0のwidthとheight値を持っていると、今度は、コンテンツの通常の流れの中でスペースを取ることはありません。子要素を伸ばしているflex親の子であるなど、空の要素がレンダリングされる可能性がある例外があります。しかし、親の連鎖に沿ったある時点で、それらのうちの1つは、ある程度の大きさを持たなければならないか、または何らかのコンテンツを（おそらく兄弟チェーン内に）持っていなければなりません。height/widthまたはそれ以外はすべて空の要素レンダリングされていません。

また、子供のpaddingとborder属性は、子供がコンテンツを持っていない場合でも、親要素をwidth/heightを生成しています。