How to place a div exactly on top of bottom div?

Question

I have a page with one navigation bar that stays always on the bottom of page. I have another div called

that hi

Answer 1

You have an with position: fixed; and bottom: 0px; so it is positioned relative to the browser window. Set position: absolute; to position it relative to the parent (#detailContainer in this case) and you will see the navigation when you set bottom:70px; on #detail

ul#navigation {
  height: 70px;
  #height: max-height: 100%;
  min-height: 70px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-width: 1px 0;
  text-align: center;
  font-size: 12px;
  font-family: 'Cham-WebFont', Arial, sans-serif;
  background-color: #FFF;
  position: fixed;
  /* new */
  bottom: 0;
  /* new */
  width: 100%;
  /* new */
}
ul#navigation li {
  display: inline;
  margin-right: .75em;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul#navigation li.last {
  margin-right: 0;
}
#MenuContainer {
  text-align: center;
  margin: 50px auto;
}
#MenuContainer a {
  margin: 0px 10px;
  display: inline-block;
  text-decoration: none;
  color: black;
}
#detail {
  display: none;
  position: fixed;
  z-index: 50;
  top: 50px;
  bottom: 70px;
  width: 100%;
  color: #FFFFFF;
  background: #1b1b1b;
}
#detailContainer {
  display: block;
  position: relative;
  height: 400px;
  padding: 30px 10px 10px 10px;
  background: url('./icon3.png') no-repeat top center;
  text-align: center;
}
#detailContainer img {
  display: block;
  width: 64px;
  height: 64px;
  border: 0px;
  margin: 40px auto 10px auto;
}
.centerKeyContainer {
  display: block;
  position: fixed;
  text-align: center;
  white-space: nowrap;
  height: 77px;
  width: 100%;
  top: 250px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
}
.first {
  display: inline-block;
  background: url('./icon1.png') no-repeat center center;
  background-size: 77px 77px;
  width: 77px;
  height: 77px;
  margin: 0px;
  border-right: 5px solid transparent;
}
.second {
  display: inline-block;
  background: url('./icon2.png') no-repeat center center;
  background-size: 77px 77px;
  width: 77px;
  height: 77px;
  margin: 0px;
  border-right: 5px solid transparent;
}
#FavKey {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 72px;
  margin: 0px;
  text-align: center;
  background: #2a2a2a;
}
.addedFav {
  display: block;
  background: url('./added.png') no-repeat 0 0;
  background-size: 320px 72px;
  width: 320px;
  height: 72px;
  padding: 0px;
  bottom: 0;
  /* new 70px*/
  margin: 0px auto;
}

  

    test
     Mango
    

    
    
    
    

     mango
    

    
    
  





  

    

      
        
        
1
      
    
    

      
        
        
2
      
    
    

      
        
        
3
      
    
    

      
        
        
4
      
    
    

      
        
        
5