HTML footer {position: absolute, fixed;} overlaps with site content, {position: relative, sticky;} f-CodePudding

I've been scouring a few dozen different pages to try to find a solution that applies to the situation I have.

I am creating a portfolio website with my projects, but the footer is behaving abnormally to resizing.

When I use

footer{
    position: absolute;
    z-index: -100;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
  }

This is the result I get at 100% zoom: 1920x1080 * 100% (Perfect)

This is the result I get at 125% zoom: 1920x1080 * 125% (Overlap between <body><div><p> & <footer>)

As you can see, my <p> contents begin to overlap with the footer element.

When I use the sticky positioning, footer{ position: sticky;}, the footer floats up and attaches itself to the bottom of {p} As shown here. I thought of two solutions but neither worked, ideally I would like the <body> to encompass at least (the entire screen - the size of the footer) (and whatever other elements that are not in the body) and have the footer as sticky. How would I go about doing this?

CodePudding user response：

Normally to fix it you need to set width and heigth with the size vw and vh.

vw -> It's width the screen. vh -> It's height of the screen.

In your tag <body> set width: 100vw and height: 100vh.

Note: Another thing "position: absolute" uses its parent to reposition itself