html - 相対的な幅のない相対的なCSS位置?

Question

要素に相対的な位置を設定したいと思います。position:absoluteしかし、その子要素 ​​( with ) に親に対する相対的な幅を持たせたくありません。

例: http://jsfiddle.net/t2yJP/。2 番目body>divにはposition:relativeが必要ですが、その子の幅は同じ動作を維持します。

Answer 1

クラスに追加width:inheritしてみてください。.abs

Answer 2

次のように、同様の効果を得ることができました。

<div class='abs pad'>
    Content content content
</div>
<div class='rel pad red'>
</div>

.rel {
    position: relative;
}
.abs {
    position: absolute;
    z-index: 1;
}
.pad {
    padding: 2px;
    margin: 2px;
}
.red {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: red;
}

Answer 3

この jsFiddleはどうですか。

しかし、あなたは本当にあなたの戦略を再考する必要があります. あなたのフィドルでは、2 番目の例は、親 div が配置されていないためにのみ機能し、したがって、.absdiv は技術的に親にありません。

通常、子要素は親の中にあります。それがコンテナの目的です！したがって、div を赤い四角形で制限したくない場合は.abs、赤い四角形の中に配置しないでください。