Docs: explains flyout position (#11954)

- Small explanation of how to set the flyout position from the webui
- Note for theme authors on how to explicitly define it from their
themes

Closes readthedocs/addons#498

<!-- readthedocs-preview docs start -->
---
:books: Documentation previews :books:

- User's documentation (`docs`):
https://docs--11954.org.readthedocs.build/en/11954/

<!-- readthedocs-preview docs end -->

<!-- readthedocs-preview dev start -->
- Developer's documentation (`dev`):
https://dev--11954.org.readthedocs.build/en/11954/

<!-- readthedocs-preview dev end -->

---------

Co-authored-by: Eric Holscher <[email protected]>

Author: humitos

docs/user/flyout-menu.rst

@@ -52,6 +52,30 @@ You can sort by:
 You can also choose whether ``latest`` and ``stable`` should be sorted first,
 as those are special versions that Read the Docs uses.
 
+Position
+^^^^^^^^
+
+The flyout can be configured in the :term:`dashboard` with the following positions:
+
+- :guilabel:`Default (from theme or Read the Docs)` - **Default**. If the theme author defines a specific position for the flyout, that position will be used.
+  Otherwise, the default position from Read the Docs will be used: ``Bottom right``.
+- :guilabel:`Bottom left` - Show the flyout at the bottom left.
+- :guilabel:`Bottom right` - Show the flyout at the bottom right.
+- :guilabel:`Top left` - Show the flyout at the top left.
+- :guilabel:`Top right` - Show the flyout at the top right.
+
+.. note::
+
+   If you are a theme author and want to define a default flyout position for your theme,
+   you can explicitly define the flyout web component with the ``position`` attribute in your HTML:
+
+   .. code:: html
+
+     <readthedocs-flyout position="bottom-left"></readthedocs-flyout>
+
+
+   Available positions: ``bottom-left``, ``bottom-right``, ``top-left`` and ``top-right``.
+
 Custom event integration
 ------------------------