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 <span id="FavKey"> 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;
}

<div style="display: block;" id="detail">
  <div id="detailContainer">
    test
    <img src="./imageone.png"><b> Mango</b>
    <br>
    <span class="centerKeyContainer">
    <span class="first" onclick=""></span>
    <span class="second" onclick=""></span>
    <br>
    <a href=""> mango</a>
    <br>
    </span>
    <span id="FavKey"><span class="addedFav"></span></span>
  </div>

</div>

<div id="MenuContainer">

  <ul id="navigation">
    <li class="x">
      <a title="1" href="./test.php">
        <img id="myButton1" src="./1.png" alt="" border="0" height="42" width="42">
        <div class="caption">1</div>
      </a>
    </li>
    <li class="x">
      <a title="2" href="./test.php">
        <img id="myButton2" src="./2.png" alt="" border="0" height="42" width="42">
        <div class="caption" style="color:red">2</div>
      </a>
    </li>
    <li class="x">
      <a title="3" href="./test.php">
        <img id="myButton3" src="./3.png" alt="" border="0" height="42" width="42">
        <div class="caption">3</div>
      </a>
    </li>
    <li class="x">
      <a title="4" href="./test.php">
        <img id="myButton4" src="./4.png" alt="" border="0" height="42" width="42">
        <div class="caption">4</div>
      </a>
    </li>
    <li class="x">
      <a title="5" href="./test.php">
        <img id="myButton5" src="./5.png" alt="" border="0" height="42" width="42">
        <div class="caption">5</div>
      </a>
    </li>
  </ul>
</div>