How do i fix the sticky footer?-CodePudding

I have implemented a sticky footer on my wordpress website with this HTML code:

<style>
.footer{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;}
</style>

But when viewing the post, the footer goes beyond a section on the website (attaching the image below) and screws up the carousal too. Ho do i fix this? footer going beyond the carousal section

I was trying to implement a sticky footer on my website. I was expecting it to get fixed at the bottom of the screen and not change anything else.

CodePudding user response：

Make sure to give a z-index property to your .footer styles. An element with a larger z-index is always stacked on top of an element with a lower z-index. Elements with the same z-index are stacked in the order they appear in the document. By default, elements have a z-index of 0. However if your footer will always be visible, better go with 100 and sure it will come on top.

Also on the picture it looks like it doesn't take the 100% width. Maybe you have margin or padding set on the parent element. But also can try to use 100vw which is gonna be the view width of the screen.

CodePudding user response：

can you provide a link to the website if available?

if not you should give the body or the content wrapper margin bottom the same height as the footer

CodePudding user response：

Try to apply z-index property.

z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.