web-dev-qa-db-ja.com

絶対位置とオーバーフローの非表示

2つのDIVがあり、一方が他方に埋め込まれています。外側のDIVが絶対に配置されていない場合、絶対に配置されている内側のDIVは、外側のDIVに隠れているオーバーフローには従いません( example )。

外側のDIVを絶対位置に設定せずに、内側のDIVを外側のDIVのオーバーフローに対応させる機会はありますか(完全なレイアウトを台無しにするため)。また、テーブルTD( exmple )から「成長」する必要があるため、内部DIVの相対位置はオプションではありません。

他のオプションはありますか?

115
Zardoz

外側<div>position: relativeに、内側<div>position: absoluteにします。それはあなたのために働くはずです。

254
shankhan

外部divのposition: relativeはどうですか?内側のものを隠す例では。また、上部または左側を指定しないため、レイアウト内で移動しません。

24
Tesserex

絶対配置された要素は、実際にrelative親、または最も近い見つかった相対親に関して配置されます。したがって、overflow: hiddenを含む要素は、relativeabsoluteの間に位置する要素でなければなりません。

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}
5
Si7ius