Streaming live at 10am (PST)

Position relative to body (bottom)

I’m looking for a way to position my footer relative to the body’s bottom.
Basically any settings I tried didn’t work. I want to set something like bottom: 10px, but absolute sets it at the bottom of the screen, not below the content if the content is larger than the screen.

Any idea how to do that?

Thanks : )

@FvG Any public link of your work to share here for us to see what you want to achieve easier?

i just built this to show what I mean:

@FvG How about this way. There I added a Section before your Container, and delete ‘1000’ class from that container and I added 2 Div blocks below Container and for 1st Div I set your ‘1000’ class. The 2nd Div I gave a class ‘footer’ that where your footer content will be placed as I moved your ‘Footer Text’ below it.

If I may suggest a better practice for elements structure

Let us know if it clear the problem.


That’s not going to work - there are pages with content less than 100% of the window’s height and the footer should be at the bottom though.

Thanks for the suggestion, that structure was just to show what I meant. : )

@FvG My bad. Try set your footer text position fixed and z-index 999 or bigger than other z-index if any.

1 Like

Uhm /: I think I just can’t explain what I mean …
I’ve created a second page, hopefully it shows it better.
See here:

The footer should be positioned absolute to the body’s bottom, not the browser window.
Maybe I’m not using the terms absolute and relative correctly.
So maybe it’s “positioned absolute and relative to the body” what I want, don’t know :smiley:

Figured it out :slight_smile: I have to set the footer to position: absolute and the body to position: relative.
I’ve created a new topic on that: Set body's position to relative

Hi, @pastiwibawa has the right solution here, to give your element an Absolute postion, fixed to bottom, with a z-index that is higher than the other content on your page. It is quite easy to make this. The nice thing is too, you do not need to make any changes to your Body selector Position and can stay with the default. Try that out:)


I think what you’re describing is a sticky footer - which is not what I want. Using position: absolute on my body seems to be the only solution that works the way I want.

Thanks guys :slight_smile:

Hi, ok,good to hear you have a solution that will work for you on that one. Thanks for the update. Cheers, Dave