MDN’s new design is in Beta! A sneak peek:

Type: string
The position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. This allows you to place the popup on one side of a button.  Note that a context menu will never respect this attribute, always appearing relative to the mouse cursor.

This value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned.

If specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word).  The anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or bottomcenter.  The popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright.

Positions specified as a single word string are shortcuts for the values above.  Valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer.
For more details, including examples, please see popup positioning

See also


Document Tags and Contributors

 Contributors to this page: Sheppy, Markh, CheekySp, pippijn, arantius, Marsf, Mgjbot, BenoitL, Dria, Ayman agour
 Last updated by: Sheppy,