jQuery UI API - Stacking Elements
Widgets that are stacked or moved to the front of other elements often face challenges when placed in real-world pages. Typically, conflicts on the page are avoided by simply changing the z-index of the stacking elements or their parent elements. However, jQuery UI requires a universal solution that does not involve manually changing z-index values. This is achieved through the ui-front class, often accompanied by the appendTo option on stacking components.
ui-front class
The ui-front class is very basic. It simply sets a static z-index value on the element. However, the presence of the class indicates where the stacking element should be appended. This allows us to leverage nested layers of content, generating a default DOM position that works in most cases.
Note: When using
Stacking Technique
Any widget that appends stacking elements to the page must use the ui-front class, and in most cases, should have an appendTo option. Stacking elements should follow these rules:
If a value is set for the
appendTooption, the stacking element is appended to the specified element.If the
appendTooption is set tonull(default), the widget should traverse the DOM starting from the related element. For example, when an autocomplete menu is appended to the DOM, the traversal starts from the related input element.If an element with the
ui-frontclass is found, append to that element.If no element with the
ui-frontclass is found, append to the body.The stacking element's
positionmust be set torelative,absolute, orfixedto apply thez-indexfrom theui-frontclass. Using .position() will automatically set theposition.