html - 如何将一个 div 恰好放在底部 div 的顶部？

Question

我有一个带有一个导航栏的页面，该导航栏始终位于页面底部。我有另一个分区称为 <div style="display: block;" id="detail">隐藏导航栏(我不希望它隐藏导航栏)!谁能告诉我我怎样才能移动 <div style="display: block;" id="detail"> div 正好在导航 div 的顶部所以两个 div 都可见吗？ (我试图将 bottom:0px; 上的 detail div 更改为 bottom:70px; 但它并没有使两者div可见)

这里是单独的导航栏的 jsfiddle url:https://jsfiddle.net/4mwdkr3p/

这是带有两个 div 的 jsfiddle(导航栏变得不可见):https://jsfiddle.net/aq13uwua/2/

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;
}

<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>

编辑(细节): 我试图解释我想要实现的目标。我正在为 ios 创建一个 web 应用程序，所以在所有页面中，我希望页面底部的用户可以看到一个导航栏。详细信息 div 包含几个按钮来播放视频和音频，并且在最后它有一个图像按钮将当前视频添加到收藏夹。一旦用户单击收藏按钮，它的图像通过 javascript 与不同的图像交换，以便用户知道他的选择已添加到收藏夹。除了最喜欢的图像按钮(红色心形)之外，所有这些功能都有效shape) 隐藏了它下面的导航栏!我正在尝试将收藏夹(红色心形图像按钮)放在导航栏上方，以便两者都可见。

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>