CSS：Divの位置：相対的な配置の問題

Question

divの位置の相対的な配置に問題があります。

最初のdivを削除しても、2番目のdivが正しい位置に固定されるようにします。 問題は、最初のdivが削除されたときに2番目のdivがその位置を調整することです。

私の質問は、最初のdivを削除しても、どのように2番目のdivの位置を保持できますか？感謝:)

このコード：

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" > 

    <div style="border: 1px solid red; position: relative; 
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div> 

    <div style="border: 1px solid red; position: relative; 
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div> 
</div> 

ウィル出力：最初のdivが削除された場合

はその後、第2のdivは、その位置を調整します。 このコード：

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" > 

    <div style="border: 1px solid red; position: relative; 
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div> 
</div> 

ウィル出力：

Answer 1

あなたは相対的に外側の要素の位置を設定した場合、それの内部絶対配置要素が封入1に対して位置決めされる。

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto; position:relative" > 
    <div style="border: 1px solid red; position: absolute; 
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div> 
    <div style="border: 1px solid red; position: absolute; 
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div> 
</div> 

今度はDIV1を除去することができ、DIV2が動きません。

Answer 2

使用絶対位置、（別名ブロックを含む）、親のdivに、内側のdivの位置は絶対になります。

そして、私は、インラインスタイルを使用しないことをお勧めしますと、スタイルシートを使用します：あなたがいずれかの絶対位置を使用することができます

<style type="text/css"> 
    #top 
    { 
     position:relative; 
     border: 1px solid red; 
     width:400px; 
     height:150px; 
     margin:0px auto; 
    } 

    #child1, #child2 
    { 
     position: absolute; 
     border: 1px solid red; 
     width: 262px; 
     height: 20px; 
     left: 20px; 
    } 

    #child1 
    { top: 20px; } 
    #child2 
    { top: 60px; } 
</style>  

<div id="top"> 
    <div id="child1">div-1</div> 
    <div id="child2">div-2</div> 
</div> 

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Answer 3

- 位置：絶対的またはディスプレイ：なし（CSS）を。

Answer 4

DIV1のvisibility CSS propertyを非表示に設定することはできますが、表示されていなくても、ページの元の容量を占有します。

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" > 
    <div style="border: 1px solid red; position: relative; 
    width: 262px; height: 20px; top: 20px; left: 20px; 
    visibility:hidden;">div-1</div> 
    <div style="border: 1px solid red; position: relative; 
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div> 
</div>