What is happening with my back to top [misplaced]

I’d like my back to top button to be placed OUTSIDE OF CONTAINER more to the right.

https://ember.2038.io/pico/lesx.html

I’d also like it not to affect height of the page, which currently does, by moving bottom text way below container.

Adjust the right margin on it (i.e. use a negative margin)?

Also, remove the top margin. What is the point of that top margin on the button anyway?

It is inside the same container as the article, as such it is expected to be placed where it is. As suggested you can pull it out of the container using a negative margin.

it’s back to top button using css only. it’s some kind of css hack for it.

I still have issue with content which comes after container being too far away from it.

Yes, because of the top margin on the button. I still do not understand why you need it.

I need it because without it button displays immediately, and with it it’s hidden unless scrolled certain amount.

Not in Chrome (I do see it in Firefox). Also, that doesn’t seem like the correct way to do that.

I’m doing it per this tutorial from FCC

That isn’t how it is done in the tutorial. The body is a grid container and the button also has a container.

Anyway, you have to move the footer content inside the article.

Here is an example, I didn’t mess with the button position.


Using JS seems cleaner, easier to reason about, and not so locked into the document structure and the styles. At least that is likely how I would do it.

Although some pure CSS is always fun, in this case, I’m not so sure about using it for anything in production.

thank you. I saved it. you can delete it. :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.