Stacking div over another div - html

Question

I'm trying to achieve something like the image I've attached
And this is what I'm trying to do in css but couldn't get it to work.
#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

Give position: relative to the parent and position: absolute to the child element, which will make sure that the child is positioned relative to the parent element. Then you can place it wherever you want based on the appropriate top and left positioning properties which replaced the unnecessary margins:
#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%; /* modified */
left: 60%; /* modified */
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

You can try something like below snippet. You need not mention .child div's height as it will be calculated when you set top and bottom.
.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 3

What you need to do is to set your wrapper div position as relative and set it's display property to block.
Now you can set your desired width and height to the wrapper.
Wrapper is marked with red dashed line.
Now you have to set the height for the child elements to expand to their wrapper div.
You can do that by providing a
height: 100%
to div1
Next is to align child items to their parent element.
Usually to align a child element to it's parent you can set the position of parent as relative and child as absolute.
You can set position: absolute to div2 and position:relative to div1
I would suggest to set the location of div2 using top and left rather than margin-top and margin-left.
Here is a very nice explanation about positions and the common mistakes:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
and here https://css-tricks.com/absolute-positioning-inside-relative-positioning/ you can find some tips on how to position parent and child elements.
I have modified your code a bit, have a look at it here:
#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 4

Try following code it can be work for you may be. You will see effect when "#div_1" have content or height.
#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 5

<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 6

For this layout it would be good, if you use position:absolute for div_2 ID and position:relative for div_1 ID, this will let you position the child div anywhere relative to the parent and it is dependent on the height of 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>