html - CSS: ポジショニングが機能しない

Question

別の div の下部に 2 つのボックスを重ねて配置しようとしています。次のコードがあります。

<div style = "height:400px;width:400px;border:1px solid #000;">
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
</div>

問題は、箱がコンテナの底ではなく上部にあることです。助けてください。

Answer 1

コンテナを相対にし、ボックスを絶対にする必要があります。

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

明確な答えのために編集：

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Answer 2

1）コンテナには「相対」位置が必要です

2) ボックスには「相対」ではなく「絶対」の位置が必要です

Answer 3

ラッピング div には position:relative が必要で、2 つの内部 div には position:absolute が必要です。

<div style = "height:400px;width:400px;border:1px solid #000; position:relative">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

CSS トリック ビデオ