は絶対位置、DIVS

オーケーの相対的な位置をミキシング、私は互いの上にあるべき2つのdivを持って次のような効果は絶対位置、DIVS

を達成したいです。私は2つの部門の直下にすべき第3の部門を持っています。最初の2つのdivは可視性を切り替えることができるので、可視であれば、もう一方は表示されません（注：トラブルシューティングを簡略化するためにjavascriptの一部のトグルを削除しました）。しかし、関係なく、3番目のdivは他の2つの下にある必要があります。数時間前にシンプルに聞こえましたが、私は何かを見逃していて、あなたの助けに感謝します。

私はあなたが見直し、うまくいけば、私が誤解しています何を見せてする唯一の重要な部分とダウンペアHTMLファイルを作成しました。

はまた、私は本当に私が動的に最初の二つのdivのサイズを変更する場合がありますことは可能であるとしてDIV3を最プロパティを使用しないことに注意してください。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script> 
     function clicked(t) { 
      t.style.visibility = "collapse"; 
      t.style.opacity = 0.0; 
     } 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div id="divone" class="one" onclick="clicked(this)"></div> 
     <div id="divtwo" class="two" onclick="clicked(this)"></div> 
     <div class="three"></div> 
    </div> 

    <style> 
     div { 
      height: 100px; 
      width: 100%; 
      transition-duration: 2s; 
     } 

      div.container { 
       width: 50%; 
       top: 0; 
       margin-left: 0px; 
       margin-top: 0px; 
       border-left: 0px; 
       border-top: 0px; 
       padding-left: 0px; 
       padding-top: 0px; 
      } 

      div.one { 
       position: absolute; 
       background-color: red; 
       width: 50%; 
       opacity: 1.0; 
       z-index:2; 
      } 

      div.two { 
       position: absolute; 
       background-color: green; 
       width: 50%; 

       opacity: 1.0; 
       z-index: 1; 
      } 

      div.three { 
       position: relative; 
       top: 0; 
       width: 60%; 
       background-color: blue; 
      } 
    </style> 
</body> 

</html>

出典

2016-03-18 Abraham Lincoln

が起こることになっているもののより良い説明を必要としています。私がそれをクリックすると、私は状態の2つの変化を得る。 – Rob

うん、最初の2つのdivが消えているのを見ている。両方が消えたら、3番目のdivを上に移動してスペースを埋めるようにします。これは私が探しているものではありませんが、この単純化されたケースを理解すれば、私は本当にやりたいことになることができます。 –

しかし、私は最後に3番目のdivを参照してください。 – Rob

これを試してみてください：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <style> 

     div { 
      height: 100px; 
      width: 100%; 
      transition-duration: 2s; 
     } 

     div.container { 
      width: 50%; 
      top: 0; 
      margin-left: 0px; 
      margin-top: 0px; 
      border-left: 0px; 
      border-top: 0px; 
      padding-left: 0px; 
      padding-top: 0px; 
     } 

     div.one { 
      background-color: red; 
      width: 50%; 
     } 

     div.two { 
      background-color: green; 
      width: 50%; 
      display:none; 
     } 

     div.three { 
      width: 50%; 
      background-color: blue; 
     } 

    </style> 

    <script> 
     function clicked(t) { 
      t.style.display = "none"; 

      if (t.id === 'divone') { 
       document.getElementById('divtwo').style.display = 'block'; 
      } else { 
       document.getElementById('divone').style.display = 'block'; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div id="divone" class="one" onclick="clicked(this)">DIV 1</div> 
     <div id="divtwo" class="two" onclick="clicked(this)">DIV 2</div> 
     <div class="three">DIV3</div> 
    </div> 
</body> 

</html>

出典

2016-03-18 20:45:53 wawawoom

ありがとう、それはまさに私が探しているものです。 div 1と2の両方が消えて3の動きが適切になるように、コードを少し変更しました。私はこれを正解と票決して投票したが、評判はまだ十分ではない。だから、それはディスプレイであると思われる。「ブロック」は私が逃したものだ。 –

絶対配置を使用しましたが、静的位置決めが必要です。これが主な問題でした。 CSSコードの違いを確認してください。 – wawawoom

ありがとうございました！ –

答えて

関連する問題