私は <p><a href="https://i.stack.imgur.com/maNs5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/maNs5.jpg" alt="enter image description here"></a></p> <p></p>を添付しました画像のような何かを達成しようとしている別のdiv

Question

上のdivを積み重ね、これは私がCSSでやろうとしているだけに、それを得ることができなかったものです作業。

#div_1 { 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 

 
#div_2 { 
 
    height: 110%; 
 
    width: 30%; 
 
    margin-top: -5%; 
 
    margin-left: 60%; 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
}

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    <div id="div_2"></div> 
 
    </div> 
 
</div>

Answer 1

ただ、親と子の絶対位置に対する相対位置を与えます。私はあなたが子供の上の余白を上と左に置き換えました。あなたがする必要がどのような

#div_1 { 
 
    position: relative; /* added */ 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0,0,0,.1); 
 
} 
 

 
#div_2 { 
 
    position: absolute; /* added */ 
 
    height: 110%; 
 
    width: 30%; 
 
    top: -5%; /* changed */ 
 
    left: 60%; /* changed */ 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0,0,0,.1); 
 
}

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    Div 1 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div id="div_2"> 
 
     Div 2 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

相対としてあなたのラッパーdivの位置を設定し、それをブロックするようにプロパティを表示します設定することです。

これで、希望の幅と高さをラッパーに設定できます。

ラッパーには赤い破線が表示されます。

今、あなたは自分のラッパーのdivに拡大して、子要素の高さを設定する必要があります。 あなたは

次は自分の親要素に子アイテムを揃えることであるDIV1する

height: 100% 

を提供することにより、それを行うことができます。

通常、子要素をその親に揃えるには、親の相対位置を子として絶対位置として設定します。

div2にposition: absoluteを、div1にposition:relativeを設定することができます div2の位置は、margin-topとmargin-leftではなく、topとleftを使用して設定することをお勧めします。ここで

位置し、一般的なミスについて非常に素敵な説明です：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

、ここhttps://css-tricks.com/absolute-positioning-inside-relative-positioning/あなたが親と子要素を配置する方法についていくつかのヒントを見つけることができます。

私はあなたのコードビット変更した

は、ここでそれを見て：

#div_wrapper { 
 
    display: block; 
 
    position: relative; 
 
    height: 200px; /* Change to whatever height you like */ 
 
    width: 400px; /* Change to whatever width you like */ 
 
    top: 50px; /* Just for demo */ 
 
    left: 10px; /* Just for demo */ 
 
    } 
 
    
 
    #div_1 { 
 
    display: block; 
 
    position: relative; /* Added */ 
 
    width: 90%; 
 
    height: 100%; /* Added */ 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
    } 
 
    
 
    #div_2 { 
 
    position: absolute; /* Added */ 
 
    height: 110%; 
 
    width: 30%; 
 
    top: -5%; /* Modified */ 
 
    left: 60%; /* Modified */ 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
    }

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    <div id="div_2"></div> 
 
    </div> 
 
</div>

Answer 3

あなたがかもしれためにそれが仕事することができ、次のコードを試してみてください。 「＃div_1」の内容や高さがあるときに効果が現れます。

#div_1 { 
    width: 90%; 
    position: relative; 
    background: #FBFBFB; 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
} 

#div_2 { 
    width: 30%; 
    position: absolute; 
    top: -5%; 
    bottom: -5%; 
    left: 60%; 
    vertical-align: top; 
    background: #FBFBFB; 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
} 

Answer 4

<style type="text/css"> 
    #div_wrapper{ 
     position: relative; 
     width: 100%; 
    } 
    #div_1 { 
     width: 90%; 
     background: #FBFBFB; 
     box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
     height: 300px; 
     margin-top: 100px; 
     position: relative; 
    } 

    #div_2 { 
      position: absolute; 
      height: 120%; 
      width: 30%; 
      right: 5%; 
      top:-10%; 
      background: #FBFBFB; 
      box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);   
     } 
</style> 
<div id="div_wrapper"> 
    <div id="div_1"> div 1 
     <div id="div_2">div 2</div> 
    </div> 
</div> 

Answer 5

あなたは、スニペット、以下のような何かを試すことができます。 topとbottomを設定すると計算されるため、.child divの高さは言及する必要はありません。このレイアウトの

.parent { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 80vh; 
 
    margin: 5% auto; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 5px #000; 
 
} 
 
.child{ 
 
    position: absolute; 
 
    top:-5%; 
 
    bottom:-5%; 
 
    right: 10%; 
 
    width: 30%; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 5px #000; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>

Answer 6

それはあなたがdiv_2 IDとdiv_1 IDについてposition:relativeためposition:absoluteを使用している場合、これはあなたが親にどこでも相対的な子のdivを配置できるようになると、それは、良いでしょうdiv_1の高さに依存します。

#div_1 { 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    display:inline-block; 
 
    position:relative; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 

 
#div_2 { 
 
    width: 30%; 
 
    position:absolute; 
 
    right:10%; 
 
    top:-10px; 
 
    bottom:-10px; 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 
#div_wrapper{ 
 
    text-align:center; 
 
    margin:50px 0px; 
 
    }

<div id="div_wrapper"> 
 
    <div id="div_1">test 
 
    <div id="div_2">test2</div> 
 
    </div> 
 
</div>