I'm confused as to why the CSS Bottom property is causing the top edge of the div to align with the bottom of the document rather than the bottom edge

My challenge is to align an image slideshow on top of my footer, with the bottom edge of the slider touching the top edge of the footer. Despite using position: fixed and bottom: 0 properties, it appears that the positioning is off - aligning the top edge to the bottom of the page instead.

When I set Position: fixed and bottom: 0; for the slideshow, it unexpectedly shifts the div all the way down to the bottom of the page, making it disappear as if sticking at the top edge rather than the desired bottom edge.

.slideshow {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding-bottom: 85px;
}

.footer {
  position: fixed;
  bottom: 0;
  background: #0d9196;
  width: 100%;
  height: 80px;
}

I anticipated the two divs to be stacked neatly, but what actually happens is the entire slideshow div slides off the page beneath the footer. Any advice or guidance on how to resolve this issue would be greatly appreciated!

jqueryhtmlcss

Answer №1

An element positioned with fixed position is placed in relation to the viewport

When you use bottom:0 on your elements, they will appear at the bottom of your page (viewport) and may overlap each other.

You can learn more about position:fixed at this link: https://www.w3schools.com/css/css_positioning.asp

If you want them stacked differently, try adding 

bottom: 80px(height of your footer)
to your .slideshow

.slideshow {
  position: fixed;
  bottom: 80px;
  width: 100%;
  padding-bottom: 85px;
  background: #ff0000;
}

.footer {
  position: fixed;
  bottom: 0;
  background: #0d9196;
  width: 100%;
  height: 80px;
}
<div class="slideshow"></div>
<div class="footer"></div>

Here's an alternative solution:

Group both divs under a parent and position them as follows:

.slideshow {
  height: 50px;
  background: red;
}

.footer {
  height: 50px;
  background: green;
}

.parent {
  position: fixed;
  width: 100%;
  bottom: 0;
}
<div class="parent">
  <div class="slideshow"></div>
  <div class="footer"></div>
</div>

I hope this helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for the Jquery Accordion to retract on click?

Hello everyone, I've created an accordion drop-down feature that reveals content when the header of the DIV is clicked. Everything works fine, but I want the drop-down to collapse if the user clicks on the same header. I am new to JQUERY and have trie ...

javascriptjqueryhtmlcssxhtml

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

javascripthtml

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

css

Transmitting JSON data using a Jquery AJAX request in PHP

I'm facing an issue passing a JSON array from a jQuery AJAX call to a PHP file and attempting to write the received data to a file. This is my code: var contacts = [{"address":[],"phone":[],"last_name":"abc","email":[{"address":"<a href="/cdn-cgi/ ...

phpajaxjsonjquery

Conceal table columns on an HTML page using CSS styling

HTML: <table class="list qy"> <tr> <td>cell1</td> <td class="q">cell2</td> <td>cell3</td> <td class="y">cell4</td> </tr> </table> CSS: table.qy td.q, table.qy td.y { displ ...

jqueryhtmlcss

Passing a string array from View to Controller using Url.Action in MVC framework

I am facing an issue where I have a method that returns an array (string[]) and I am attempting to pass this array of strings into an Action. However, I am currently unable to pass my parameters as expected. Being new in MVC3, I would appreciate any insi ...

javascriptarraysasp.net-mvc-3jqueryurl-routing

Using JavaScript, insert a new date row onto a JSP page

When I click on a hyperlink, I want to add a new row to a jsp page. The functionality is working correctly, but the date function class="dateTxt" is not functioning in the new row. Below are the details of the javascript and jsp function. Javascript: fun ...

javascriptjqueryhtmljsp

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

javascripthtml

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

cssnext.jscss-modules

Error: The function $(...).froalaEditor is not recognized | This issue is occurring within the $(document).ready(function(){}) block in J

When attempting to set HTML content of the Froala editor within a JSP using $(document).ready(), this error occurs. TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP I read on a GitHub issue that placing jQuery sc ...

javascripthtmljqueryjspfroala

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

phphtml

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

htmlnode.jsexpressejs

Button remains behind the image, not moving to the front

I have placed my button on the image, but I want it to sit on top of the image. However, the z-index: 1; property is not working as expected. I have tried all possible position attributes to see if it works, but there was no change. I also added z-index to ...

htmlcss

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

Can you explain why the bullets are showing up before the list items are added? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>To Do List</title> </head> <body> ...

javascripthtmlnode.jsejs

React does not play well with Bootstrap's JavaScript and may cause it to not function or load properly

Initially, I set up a simple react application by running the command: npx create-react-app appnamehere Following that, I proceeded to install Bootstrap (trying both versions 4 and 5) with the command: npm install bootstrap After this, I included them in ...

javascripthtmlreactjsbootstrap-4bootstrap-5

Is there a way to interrupt a function in jquery before it completes its execution?

I've created a program that activates a sequence of 5 lights and sounds when a button is clicked, continuously looping through the sequence. There's another button labeled "cancel" to stop the loop midway and reset everything to the initial state ...

javascriptjqueryfunctionsettimeoutsetinterval

The Google map is not appearing when placed within the "row" class

My goal is to showcase Google Maps on my website, and every time I try to do so using the following code: <div class="large-12 columns" id="map-canvas"></div> The map displays perfectly and works as expected. However, when I nest this div wi ...

htmlcssgoogle-mapszurb-foundation