CODEWITHSUNDEEP
htmlcss
Nadir
Nadir

Reputation: 1379

position part of the div underneath another

I'm trying to hide part of the div underneath another. https://jsfiddle.net/71obhkzh/7/ shows what I have now.

<div>
  some stuff here
</div>
<div id="container">
  <div id="top">

  </div>
  <div id="bottom">

  </div>
</div>
<div>
  some stuff here
</div>

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
}

#bottom {
  height:100px;
  width: 120px;
  background-color: blue;
  margin-top: -40px;
}

In the fiddle I used the negative margin-top to move the blue div up a bit, but it covers the bottom of the red div. I need the red one to be on top of blue one like this https://awwapp.com/b/unzo2gs6g/

Ok, if I add the z index as suggested it works on the fiddle, but in real app the colors are mixed like here http://i67.tinypic.com/34pets8.png I'm using bootstrap and the reality is bit more complicated (flex boxes in the top and bottom div with more content). I tried to set opacity on the top div but it did not help

real code (login container is the red one, info the blue one)

 <div class="container">
    <div class="row justify-content-center login-container">
     <div class="col-6 login-box">login form here</div> 
     <div class="col-4 register-box">register box here</div>
    </div>
    <div class="d-flex justify-content-center info-container">
      <div id="advantages" class="d-flex flex-column justify-content-center align-items-center">
       some text
      </div>
      <div id="image" class="d-flex flex-column justify-content-center align-items-center">
        <img src="some image"/>
      </div>
    </div>
  </div>

https://jsfiddle.net/71obhkzh/31/

Upvotes: 0

Views: 44

Answers (2)

David
David

Reputation: 801

Make use of z-index. 

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
  z-index: 2
}

#bottom {
  height:100px;
  width: 200px;
  background-color: blue;
  margin-top: -40px;
  z-index: 1
}
<div>
  some stuff here
</div>
<div id="container">
  <div id="top">
      
  </div>
  <div id="bottom">
  
  </div>
</div>
<div>
  some stuff here
</div>

Upvotes: 1

aMJay
aMJay

Reputation: 2233

Use z-index to do that:

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
  z-index:2;
}

#bottom {
  height:100px;
  width: 120px;
  background-color: blue;
  margin-top: -40px;
  z-index:1;
}
<div>
  some stuff here
</div>
<div id="container">
  <div id="top">
      
  </div>
  <div id="bottom">
  
  </div>
</div>
<div>
  some stuff here
</div>

Upvotes: 0

Related Questions