How to make element change behavior depending on screen position? For example, imagine an input/select that opens an option box or a button that shows a dialog box, as in the image below, but notice that when the same element is at the bottom of the page, it opens the boxes to the side that has space , as a native input/select does.

I noticed this bug in even famous libraries with millions of weekly downloads, that if the element is at the bottom of the page, two unwanted situations happen: Either the element doesn't appear (it stays off the screen), or it expands the area, increasing the screen and distorting the layout.

Anyway, boxes should always open in reaction to the main element, like a "position: relative + position: absolute".

The preferred solution should be just HTML + CSS (as "pure" as possible), but if that's not possible then you can use javascript, too. How can I do this?

How can I do this?