如何将div正好放在底部div的顶部？ [英] How to place a div exactly on top of bottom div?

问题描述

我有一个包含一个导航栏的页面，始终位于页面底部。我有另一个div
调用< div style =display：block; id =detail> 隐藏导航栏（我不希望它隐藏导航栏）！有人可以告诉我
如何移动< div style =display：block; id =detail> div正好在导航div的顶部，所以
两个div是可见的？ （我试图改变 bottom：0px; 在细节 div到 bottom：70px; / code>但它没有使两个
divs可见）

I have a page with one navigation bar that stays always on the bottom of page. I have another div called <div style="display: block;" id="detail"> that hides the navigation bar(i don't want it to hide the navigation bar)! Could anyone tell me how I can move the <div style="display: block;" id="detail"> div exactly on the top of navigation div so both div be visible ? (I tried to changebottom:0px; on detail div to bottom:70px; but it didn't make both divs visible)

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

Here is the jsfiddle url for navigation bar alone:https://jsfiddle.net/4mwdkr3p/

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

Here is the jsfiddle with both div(navigation bar became invisable):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>

）：
我尝试解释我想实现的。我创建一个web应用程序的ios所以在所有的页面我想要导航栏是可见的用户在页面底部。细节div包含几个按钮播放视频和音频，最后它有一个图像按钮添加当前视频到收藏.once用户点击收藏按钮其图像互换与不同的图像通过javascript，所以用户知道他的选择添加到收藏夹。所有这一功能除了喜欢的图像按钮（红色的心形状）隐藏其下的导航栏！

Edit(detail): I try to explain what i want to achieve.I am creating a webapp for ios so in all pages i want a navigation bar be visible for user at the bottom of page .The detail div holds few buttons to play video and audio and at the end it has an image button to add the current video to favorite .once user click the favorite button its image swap with different image via javascript so user know that his selection added to favorite.All this feature works except that favorite image button(red heart shape)hides the navigation bar below it! I am trying to place the favorite( red heart shaped image button )above navigation bar so both be visible.

推荐答案

你有一个< span id =FavKey> 与 position：fixed; 0px; ，因此它相对于浏览器窗口定位。设置 position：absolute; 以相对于父项（在这种情况下 #detailContainer ）定位，导航当您在上设置 bottom：70px; > #detail

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>

这篇关于如何将div正好放在底部div的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！