CODEWITHSUNDEEP
htmlcss
Sarabjit
Sarabjit

Reputation: 149

Stacking div over another div

I'm trying to achieve something like the image I've attached

enter image description here

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>

Upvotes: 0

Views: 3667

Answers (6)

VXp
VXp

Reputation: 12118

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>

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 58612

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>

Upvotes: 0

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

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>

Upvotes: 1

Ravi Chauhan
Ravi Chauhan

Reputation: 1477

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

Upvotes: 0

Hanif
Hanif

Reputation: 3795

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);
}

Upvotes: 0

Nemesis
Nemesis

Reputation: 121

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.

Set your wrapper

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 Set height

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. Align div2

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>

Upvotes: 0

Related Questions