Menu Close

How to make a div always float on the screen in top right corner with CSS?

Sometimes, we want to make a div always float on the screen in top right corner with CSS.

In this article, we’ll look at how to make a div always float on the screen in top right corner with CSS.

How to make a div always float on the screen in top right corner with CSS?

To make a div always float on the screen in top right corner with CSS, we use fixed position.

For instance, we write

html,
body {
  height: 100%;
  overflow: auto;
}

body #fixedElement {
  position: fixed;
  bottom: 0;
}

to make the element with ID fixedElement fixed to the screen.

We make it fixed with position: fixed;.

Then we make it stay at the bottom with bottom: 0;.

Conclusion

To make a div always float on the screen in top right corner with CSS, we use fixed position.

Posted in CSS