Add position prop to Overlay to allow better fixed position rendering

[ajhenry]

Description

Following up from a slack thread, it would be great if we could add a position prop to the overlay component so we don't need to do math to change which side the overlay component renders on.

For example, this story has the overlay rendering on the right side using some math which seems inefficient especially if we don't know the width of the Overlay.

But we can achieve the same result if we add a new prop called position with the values left or right. From there, the user can customize the behavior of the left/right values with the sx prop

Today, this code does not work as one would expect — it will still render on the left of the screen

<Overlay 
 sx={{
 position: "fixed",
 right: 0,
 }}
>
 Example Overlay
</Overlay>

My proposed change would allow a user to specify a side (with a default value of left to keep in line with existing behavior)

<Overlay 
 position="right"
>
 Example Overlay
</Overlay>

Steps to reproduce

1. Create an Overlay component
2. Try to get it to render on the right of the screen — particularly with an auto width content

Sandbox: https://codesandbox.io/s/great-murdock-6yjjpd

Version

v35.10.0

Browser

Chrome