css - 位置相対 DIVS

Question

私はいつも次のようなコードを目にします：

#container {
    background:#000000 none repeat scroll 0 0;
    display:block;
    overflow:hidden;
    position:relative;
    width:100%;
}

相対位置は、CSS プロパティの左右上下 (px) を使用して親要素に対して相対的に div を収容するために使用されると考えました。以下の例のように単独で使用する意味は何ですか? 相対位置によって影響を受ける他のプロパティはどれですか?

Answer 1

子要素の位置は、これによって影響を受ける可能性があります。

親要素の位置を相対に設定した後、子要素の位置を絶対に設定しようとすると、ドキュメントではなく親に対してのみ絶対に配置されます。

最初の例

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        position:relative;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

2 番目の例

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

上記の 2 つの例を確認してみてください。違いがわかります。

Answer 2

これは body 要素に対して相対的になると信じているため、「width:100%」を本体の幅全体に対して相対的に適用します。