web-dev-qa-db-ja.com

絶対位置を使用せずに1つのdivを別のdivにオーバーレイする方法

2つの画像を持つ2つのdivがあります。

<div id="div1">    

     <div id="div2">
         <img src="img1" />
    </div> 

    <img src="img2" /> 

</div>

2つ目は1つ目より少し小さいです。使用せずに最初の画像に2番目の画像を配置する方法

#div2{
    position: absolute;
}

similar の結果を取得する必要がありますが、位置の絶対プロパティを使用しません。

主な問題は、div2だけでなく、親divにも他の要素がたくさんあることです。

cssoverlaycss-positionmargin
12
Dmytro

負のマージン

あなたは負のマージンでたくさんすることができます。私は 例 を作成しましたが、divのない2つの画像のみを使用しています。

img {
    display: block;
}
.small {
    margin: -202px 0 0 0;
    border: 1px solid #fff;
}
.small.top {
    position: relative;
    margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
19
Robert Koritnik

あなたへの私の質問は、なぜあなたがこれなしでこれをしなければならないのかです

#div2 {
    position: absolute;
}

発生している問題がdivではなくページにとって絶対的な問題である場合は、＃div1に以下が含まれていることを確認してください。

#div1 {
    position:relative;
}
7
Andy

ネストできますdiv2内部div1：

<div id="div1">
    <img src="\img1.png" />

    <div id="div2">
        <img src="\img1.png" />
    </div>

</div>
2
Kevin Boucher

負のマージンを使用するのは良い方法ではありません。特にメールテンプレートを作成する場合、Gmailはマイナスのマージンと位置を拒否します。だから別の方法は

    <div class='wrapDiv'  style='width: 255px;'>
           <div class='divToComeUp' style='
                    float: left;
                    margin-top: 149px; width:100%;'>This text comes above the .innerDiv  
according to the amount of margin-top that you give</div>

           <div class='innerDiv' style='width:100%; height:600px'>
               Inner div Content
           </div>

    </div>
1
saad