如何将div正好放在底部div的顶部？

Question

我有一个页面，其中一个导航栏始终位于页面底部。我有另一个div 名为<div style="display: block;" id="detail">，隐藏导航栏（我不希望它隐藏导航栏）！有谁能告诉我 我如何将<div style="display: block;" id="detail"> div精确地移动到导航div的顶部 两个div都可见？ （我尝试将bottom:0px; div上的detail更改为bottom:70px;，但它并未将两者都改为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: 0px; 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('http://s13.postimg.org/b10yulrlv/playresized.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('http://s10.postimg.org/t5xpfzyhx/mango_Resized.jpg') no-repeat center center; background-size: 77px 77px; width: 77px; height: 77px; margin: 0px; border-right: 5px solid transparent; } #FavKey { display: block; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 72px; margin: 0px; text-align: center; background: #2a2a2a; } .addedFav { display: block; background: url('http://s28.postimg.org/tkcsrugvh/added.png') no-repeat 0 0; background-size: 320px 72px; width: 320px; height: 72px; padding: 0px; bottom: 0; /* new 70px*/ margin: 0px auto; } divs visible）

以下是单独导航栏的jsfiddle网址：https://jsfiddle.net/4mwdkr3p/

这是两个div（导航栏变得不可见）的jsfiddle：https://jsfiddle.net/aq13uwua/2/

<div style="display: block;" id="detail">
  <div id="detailContainer">
    test
    <img src="https://www.gstatic.com/webp/gallery3/1.sm.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="http://s24.postimg.org/6nv5v6uu9/worldresized.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>

Me.WebBrowser1.ObjectForScripting = Me

编辑（细节）：  我试着解释一下我想要实现的目标。我正在为ios创建一个webapp，所以在所有页面中，我希望在页面底部为用户显示导航栏。详细div包含几个按钮来播放视频和音频，并且在结束它有一个图像按钮，将当前视频添加到收藏夹.once用户单击收藏夹按钮，其图像通过javascript与不同的图像交换，以便用户知道他的选择添加到收藏夹。所有这个功能工作除了喜欢的图像按钮（红色的心脏形状）隐藏它下方的导航栏！我试图将最喜欢的（红色心形图像按钮）放在导航栏上方，以便两者都可见。

Answer 1

您有<span id="FavKey"> position: fixed;和bottom: 0px;，因此它相对于浏览器窗口定位。设置position: absolute;以将其相对于父级（在这种情况下为#detailContainer）定位，当您在bottom:70px;

上设置#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>