What is the best way to position a div directly over another div at the bottom of the page

Question

What is the best way to position a div directly over another div at the bottom of the page

I am facing an issue on my web page where I have a navigation bar always at the bottom of the page. However, I also have another

<div style="display: block;" id="detail">

that currently hides the navigation bar. I want both divs to be visible and aligned properly. Can anyone guide me on how to position the

<div style="display: block;" id="detail">

exactly on top of the navigation bar?

To clarify, here is the link to the jsfiddle with just the navigation bar:https://jsfiddle.net/4mwdkr3p/

And here is the link to the jsfiddle with both div elements (where the navigation bar becomes invisible):https://jsfiddle.net/aq13uwua/2/

[CSS Code Here]

[HTML Code Here]

Edit(detail): I am developing a web app for iOS where I need a persistent navigation bar at the bottom of each page. The detail div contains buttons for playing videos and audio, as well as an image button for adding the current video to favorites. When this favorite button is clicked, its image changes via JavaScript to indicate that it has been added to favorites. However, the issue is that this favorite image button overlaps and hides the navigation bar below it. My goal is to position the favorite button above the navigation bar so that both are visible simultaneously.

html css

Answer 1

Answer №1

In your HTML code, you are utilizing an element with id "FavKey" and setting its position to fixed at the bottom of the browser window using CSS properties like position: fixed; and bottom: 0px;. To make sure this element is positioned relative to its parent container (in this case, #detailContainer), you should change its positioning to absolute by adding position: absolute;. By doing so, when you set bottom:70px; on the #detail element, you will be able to see the navigation properly.

ul#navigation {
  height: 70px;
  /* additional styles */
}
/* other CSS rules specific to the navigation bar */

#MenuContainer {
  text-align: center;
  margin: 50px auto;
}
/* other CSS rules for MenuContainer */

#detail {
  display: none;
  /* additional styles */
}
/* other CSS rules for detail */

#detailContainer {
  display: block;
  /* additional styles */
}
/* other CSS rules for detailContainer */

.centerKeyContainer {
  display: block;
  /* additional styles */
}
/* other CSS rules for centerKeyContainer */

.first {
  display: inline-block;
  /* additional styles */
}

.second {
  display: inline-block;
  /* additional styles */
}

#FavKey {
  display: block;
  /* additional styles */
}

.addedFav {
  display: block;
  /* additional styles */
}

<div style="display: block;" id="detail">
  <div id="detailContainer">
    test
    <img src="./imageone.png"><b> Mango</b>
    <br>
    /* other HTML content */
  </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>
    /* more list items */
  </ul>
</div>

Answer 2

In your HTML code, you are utilizing an element with id "FavKey" and setting its position to fixed at the bottom of the browser window using CSS properties like position: fixed; and bottom: 0px;. To make sure this element is positioned relative to its parent container (in this case, #detailContainer), you should change its positioning to absolute by adding position: absolute;. By doing so, when you set bottom:70px; on the #detail element, you will be able to see the navigation properly.

ul#navigation {
  height: 70px;
  /* additional styles */
}
/* other CSS rules specific to the navigation bar */

#MenuContainer {
  text-align: center;
  margin: 50px auto;
}
/* other CSS rules for MenuContainer */

#detail {
  display: none;
  /* additional styles */
}
/* other CSS rules for detail */

#detailContainer {
  display: block;
  /* additional styles */
}
/* other CSS rules for detailContainer */

.centerKeyContainer {
  display: block;
  /* additional styles */
}
/* other CSS rules for centerKeyContainer */

.first {
  display: inline-block;
  /* additional styles */
}

.second {
  display: inline-block;
  /* additional styles */
}

#FavKey {
  display: block;
  /* additional styles */
}

.addedFav {
  display: block;
  /* additional styles */
}

<div style="display: block;" id="detail">
  <div id="detailContainer">
    test
    <img src="./imageone.png"><b> Mango</b>
    <br>
    /* other HTML content */
  </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>
    /* more list items */
  </ul>
</div>

What is the best way to position a div directly over another div at the bottom of the page

Answer №1

Similar questions

Discovering the method for retrieving JavaScript output in Selenium

Update the href attribute when a button is clicked

Picture fails to load on iPad/iPod devices

Interpreting HTML using a PHP script and running PHP commands embedded in the file

Looking to create a sophisticated HTML table design

How to move content without affecting the background of the `<body>` using scrolling

Issue with div in simple HTML code

ng-class in AngularJs updates the class of all items within ng-repeat in the view

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Obtaining table data and HTML elements using the correct code - Selenium and Python

Filestack - NoCrop: Utilize whitespace to maintain the square aspect ratio when uploading images without cropping

What is the best way to access a child element from a parent element in HTML?

Add the AJAX response to a div element when the submit button is pressed

Displaying a loading screen while a jQuery ajax request is in progress

Click on the span to smoothly navigate to a specific div

Vue's v-for modifies the initial element within the list

What are some creative ways to enhance closePath() in canvas styling?

Tips for maintaining proper alignment of the element within the given space and organizing it vertically with appropriate spacing

Is it possible to use font-face in CSS3 to switch fonts for different languages?

The switchView feature is currently malfunctioning and unable to access the content on the next page