-4

I have two div and I need to second div to overlap first div.

<div id="behind">some text here</div>
<div id="above">some text here</div>

I need 2nd div to overlap first.

imran saeed
  • 53
  • 8
  • 6
    Dude!! A Simple google search would help! People here are not for doing your tasks! Please read and show us what you tried b4 asking questions here – Akshay Khandelwal May 19 '17 at 15:36
  • 1
    Possible duplicate of [CSS: Make two floating elements overlap](http://stackoverflow.com/questions/9227007/css-make-two-floating-elements-overlap) – evolutionxbox May 19 '17 at 15:39
  • Possible duplicate of http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap – vabii May 19 '17 at 15:41

1 Answers1

0

You need to set your divs' position to anything other than default(which is static). So, set it to absolute, fixed or relative and make them overlap each other by adjusting their x,y co-ordinates.

With default position, each element takes up its own space on the rendered page and pushes other elements downwards (or horizontally further), so these elements come one after another.

Setting position to absolute or fixed takes the element out of normal flow and the element does not take any ground space on the page now. Now, it can sort of hover above other elements.

#container
{
  position: relative;
}

#container > div
{
  background-color: orange;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

#container > div:nth-child(2)
{
  background-color: green;
  left: 50px;
  top: 50px;
}
<div id="container">
  <div></div>
  <div></div>
</div>
Mohit Bhardwaj
  • 9,650
  • 3
  • 37
  • 64