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

Question

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)
Here is the jsfiddle url for navigation bar alone:https://jsfiddle.net/4mwdkr3p/
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>
mango
<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>
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.

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