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

Question

2 つの DIV があり、1 つはもう 1 つの内部にネストされています。外部 DIV が絶対配置に設定されていない場合、絶対配置された内部 DIV は外部 DIV のオーバーフロー非表示を考慮しません。

#first {
    幅: 200ピクセル;
    高さ: 200ピクセル;
    背景色: 緑;
    オーバーフロー: 非表示;
}

＃2番 {
    幅: 50ピクセル;
    高さ: 50ピクセル;
    背景色: 赤;
    位置: 絶対;
    左: 250ピクセル;
    上: 250ピクセル;
}

<div id="first">
    <div id="セカンド"></div>
    <div id="three"></div>
</div>

外側の DIV を絶対位置に設定せずに、内側の DIV を外側の DIV のオーバーフロー非表示に従わせる方法はありますか (全体のレイアウトが壊れる可能性があるため)。 また、テーブル TD を「ハイライト」する必要があるため、相対位置決めは内部 DIV のオプションではありません。

#first {
    幅: 200ピクセル;
    高さ: 200ピクセル;
    背景色: 緑;
}

＃2番 {
    幅: 50ピクセル;
    高さ: 400ピクセル;
    背景色: 赤;
    位置: 相対的;
    左: 0px;
    上: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="セカンド"></div>
        </td>
    </tr>
</table>

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

Answer 1

外部 div に position:relative を使用するのはどうですか?内部の div を非表示にする例では、上または左の指定がないため、レイアウト内で移動しません。

Answer 2

外側の <div> を position:relative に設定し、内側の <div> を position:absolute に設定します。これはうまくいくはずです。