Fixed footer Z-index problem

Hi there,

Any chance you can link us to the site in question?

Let me know ??

Dear Leo!
Thanks your fast reply and happy hollidays!

Sorry, i cant give you, beacuse im working in localhost. ??

I made for you some printscreen.

I will try to describe the problem.
Let’s look at things like layers in a photshop, above and below each other. ??
With the Z-index command, I can override the “deafults”.

Even though I set the footer to be the lowest layer, it is inserted between the “body” and the “container layer.

The goal would be to visually scroll the footer from behind the body as you scroll

I dont know what i made wrong. ?? (The footer z-index is the lowest, position is fixed & 100% width.)

https://ibb.co/g3PZRbt
https://ibb.co/dmHP6dk
https://ibb.co/M2VVkHm
https://ibb.co/SvQsqtz

I would need to inspect the code for issues like this so screenshots don’t really work.

Can you duplicate the issue on a staging site so I can see?

Thanks ??

Dear Leo!

I have made a site for you. (Not 100% identical but the problem part is the same.)

I tried it with footer section (with widgets) and raw html in copyright section. The result is same. (You can see better the “effect” with the sample page)
https://sim.simplecreative.hu/

Sorry but I’m not sure what you are trying to achieve here.

Do you have an example to show?

Keep in mind that providing a custom solution is not within the free support forum scope here.

But if it’s simple, I can try to point you in the right direction.

Thanks for your understanding ??

Hi Leo!

Thanks your answers. Is it really custom solution, or MAYBE a bug? (I dont know.)
I tried to write my problem, but i try it again.

We have 4 element.

Header / Body / Content (inside-article ect) / Footer.
I tried to use the Z-index css (-99999999) for footer, but it doesnt go to last “layer”.
It will be goes only between body and content and not behind to body.

Hi there,

An Elements z-index is relative to its parent container. In this case the Footers parent container is the Body, so it can never move behind the body as it is inside it.

Instead you would need to make the #page element full width, give it a background color to match the body, and give its some bottom margin to allow the footer to be visible on scroll. Try adding this to your current CSS:

/* Make Page full width and add background */
#page.grid-container {
    max-width: 100%;
    margin-bottom: 840px; /* height of the footer */
    background-color: #03192b; /* Set page background to match body */
}
/* Fix content width */
#content {
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
}