concealing a footer behind the main content by utilizing z-index

My goal is to conceal a footer beneath the main content that will only become visible when the main content is scrolled above the footer itself. However, I am encountering an issue where setting the footer's z-index to a negative value successfully hides the footer, but renders the links unclickable.

In an attempt to resolve this issue, I experimented with increasing the z-index of the main content while setting the footer's z-index to zero. This approach, however, resulted in the footer being displayed above the main content.

Below is a snippet of the code I have been working with:

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
}
#mainBg {
    background:red;
}
footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:0;
    width:100%;
}
<body>
    <div id="main">
        <div id="mainBg">Lorem ipsum dolor sit amet... (content truncated for brevity)</div>
    </div>
    <footer>footer footer
        <br/>
        ... (footer content truncated for brevity) ... <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>
...

To further demonstrate this issue, I have included links to JSFiddles showcasing both scenarios:

JSFIDDLE - Negative Z-Index

JSFIDDLE - Positive Z-Index

htmlcssz-index

Answer №1

To resolve the issue, include position:relative in main, and then add either padding to the bottom of the body or specify a height. The problem lies within main, as indicated in the comments.

Solution with Padding Bottom:

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
    position: relative;
}

#mainBg {
    background:red;
    
}

footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:3;
    width:100%;
}

body {
  padding-bottom:200px;
}
<body>
    <div id="main">
        <div id="mainBg"> ipsum dolor sit amet... (content continues) </div>
    </div>
    <footer>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <br/>
    </footer>
</body>

Solution with Height:

#main {
    z-index:4;
    padding:0px 0px 450px;
    border-bottom:1px solid red;
    position: relative;
}

#mainBg {
    background:red;
    
}

footer {
    padding: 50px 0;
    bottom:0;
    position:fixed;
    z-index:3;
    width:100%;
}

body {
  height:1500px;
}
<body>
    <div id="main">
        <div id="mainBg"> ipsum dolor sit amet... (content continues) </div>
    </div>
    <footer>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <a href="http://google.co.uk">Google link</a>
        <br/>footer footer
        <br/>
        <br/>footer footer
        <br/>
        <br/>
    </footer>
</body>

Answer №2

The bottom padding of #main is set to 450px, causing it to overlap with the footer. Consider applying a 450px bottom padding to the body instead and removing it from #main.

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 to display all tabs simultaneously with jQuery for tabbed content?

I'm currently utilizing jQuery to organize my content into various tabs, and it's working perfectly for displaying a specific <div> when a tab is clicked. However, I'm now looking to add a button that can toggle the display of all tab ...

javascriptjqueryhtml

Extending image across several rows within a form

I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it sta ...

htmlcsstwitter-bootstraptwitter-bootstrap-form

Merge web address when form is sent

I'm currently working on a search application using the Django framework and the Yelp API as my backend, which is functioning properly. However, I am facing some challenges with the frontend development, specifically integrating Leaflet.js. My search ...

javascripthtmlformsleaflet

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

UPDATE: Issue occurring on Internet Explorer 10, Windows 7 When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same ...

javascripthtmlcsscss-animations

Maintaining the Syntax when Copying HTML to a Text Area

In my project, I rely on markdown for text editing. The markdown is converted to HTML and then stored in the database for display in the view. When users want to edit a post, the stored text is retrieved from the database and used as the initial value in ...

javascripthtmlangulartextarea

Utilizing grid for styling headings and paragraphs with h3, h4, and p tags

Looking for help with aligning posts in columns? Here's the code and display challenge: <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Repr ...

css

Is HTML5 capable of supporting a multi-file uploader system in browsers?

Can you tell me which web browsers currently support the ability to select multiple files in an upload form, as introduced in the HTML5 spec? And does Adobe AIR also support this feature? As a bonus question, I'm curious if there are any JavaScript l ...

file-uploadairhtmlcross-browsermultifile-uploader

Determining the length of an array of objects nested within another object

I received a response from the API called res. The response is in the following format: {"plan":[{"name":"ABC"},{"name":"DEF"}]}. I am attempting to save this response in my TypeScript code as shown below: ...

htmlangulartypescriptapiangular8

Utilizing HTML form action to link to a PHP script located in a separate folder

My journey begins here Main: Members/name.html search.php Members is a directory containing my html code in name.html <form action="../search.php" method="get"> <div> &l ...

phphtml

Is it possible for setting the height of a div container to disable clicks within the div

There is a peculiar issue I am facing. I have an input button within 3 nested divs, with the outermost one having the id "container". Strangely, when I specify the height of "container", the click events for inputs with ids "switch" and "next" do not work ...

javascriptjqueryhtmlcss

modify the background color at core.scss line 149

I am struggling to change the background color of my Ionic login page. I have tried adding custom CSS in various places, such as core.scss:149, but it only works when I add it directly in Chrome developer tools. How can I get this custom background color t ...

cssangularionic-framework

Aligning hyperlink with full-height image within a table cell (navigation buttons)

I am currently working on creating a traditional navigation bar that occupies 20% of the screen width and consists of 3 buttons. Each button is supposed to have an icon that is centered both vertically and horizontally. Additionally, I want the buttons to ...

javascripthtmlcss

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript

Exploring ways to manipulate checkboxes using jQuery for enhanced form validation

I am working on a custom validation for four fields, with one required to be filled in. However, I am facing an issue where the validation process is interfering with the functionality of my checkboxes. Once the jQuery click function runs, the checkboxes a ...

javascriptjqueryhtml

What is the method for shortening the sizable text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." using PHP?

Modify the large text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." $string = "Hereisthelargetextbreakwithphp"; $string = strip_tags($string); if (strlen($string) > 21) { $stringCut = substr($string, 0, 21); echo $string = substr($str ...

phphtmlcodeigniter

Centered CSS Box with Pointing Arrow

I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...

css

Utilizing CSS to place an image on top of the upcoming <div> container

My goal is to create a layout similar to the one displayed in the linked image. https://i.stack.imgur.com/7DSE9.jpg Currently, I am using Bootstrap 3 and my HTML markup looks like this: <body class="gray-bg"> <section class="white-bg"> <d ...

htmlcsslayoutposition

unexpected issue when trying to append a child element after creating its innerHTML

Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into: <div id="checkboxes"> <label><input type="checkbox">option1</label> <label><input type="checkbox">opt ...

javascripthtml

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascripthtmlnode.jsexpresshandlebars.js

Failure occurred when attempting to redirect in HTML

Within my HTML code snippet, I have included a section that pertains to notifications. The main issue I am encountering is related to the redirection behavior when clicking on the "Home" link inside the designated notification container with the ID "notifi ...

pythonhtmlcssdjango