絶対配置されたdivが他の絶対配置されたdivに入れ子になっている問題

私はCSSのエキスパートではありませんが、特にポジショニングの際には、この問題を解決することができます。 "コントロール" のdivが正しくレンダリングされていません絶対配置されたdivが他の絶対配置されたdivに入れ子になっている問題

<body> 
    <div style="height:100%;width:100%;"> 
     <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;"> 
      <!-- The controls div does not render correctly. --> 
      <div id="controls" style="left:10px;position:absolute;top:10px;"> 
      </div> 
      <!-- The legend and logos divs do render correctly. --> 
      <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
      </div> 
      <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

：

は、ここに私の単純化されたHTMLです。実際、それは全く表示されません。私が "トップ10px;" "bottom：400px;"に置き換えると、正しくレンダリングされます。ユーザーがブラウザウィンドウのサイズを変更した場合、divの高さが調整されるので、これは私が望むものではありません。私はまた、divを配置するためにJavaScriptを使用したくない。

「凡例」と「ロゴ」の両方のdivが正しく表示されます。

私はFirefoxでテストを行っています。あなたは、単に親を与える必要があります

出典

2010-12-10 Nate Irwin

は、ここに私がしてしまったものです。おかげで、Sarfrazとsholsinger、正しい方向に私を導く：

<body> 
    <div style="height:100%;width:100%;"> 
     <div style="bottom:250px;position:absolute;top:0;width:100%">    
      <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;"> 
       <div id="controls" style="left:10px;position:absolute;top:10px;"> 
       </div> 
       <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
       </div> 
       <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
       </div> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

だから私は基本的には、絶対位置のdivに「マップ」のdivを入れ子にし、それを設定する「位置;相対;」。

私が最初に掲載の例では二つの問題がありました：sholsingerによって指摘

としては、私のdivは100％に設定し、これは100％にdivのサイジングされた「マップ」の高さブラウザウィンドウの「下：250ピクセル;そのdivをページの外に押し出すだけでした。これにより、コントロールが画面からレンダリングされていました。私はディスプレイを正しく動作させるために "controls"（ "margin-top：260px;"）に新しいスタイルを設定するだけで、根本的な問題を正しく解決することはできませんでした。
Sarfrazによって指摘されているように、「地図」divには「position：relative;」が必要でした。絶対配置されたコントロールが正しく表示されるように定義されています。

上記の修正は、これらの問題の両方を解決します。

出典

2010-12-10 19:24:58

はrelativeと子供absoluteに設定された位置をDIV。このCSSのトリックは、ここで説明されています

Absolute Positioning Inside Relative Positioning

出典

2010-12-10 17:24:48 Sarfraz

「map：」を「position：relative;」に設定すると、正しく表示されません。 –

合意。 '＃controls' divはおそらくレンダリングされていますが、親には' overflow：hidden'がありますので、親の外側に描画され、表示されません。また、親div '＃map'がページの上部を越えて' 250px 'を伸ばしている場合（あなたのCSSが右にレンダリングされるべきである）、コントロールはオフスクリーンになります。 – sholsinger

@Nate： 'bottom：250px'を削除し、' div＃map'で 'position：relative'を変更した場合、内側divは必要な場所にする必要があります。 – sholsinger

絶対配置されたdivが他の絶対配置されたdivに入れ子になっている問題

答えて

関連する問題