jQuery UI API - Stacking Elements

Stacked widgets or widgets moved in front of other elements often face challenges when placed in real-world pages. Usually by simply changing the stacking element'sz-indexor parent element to avoid conflicts on the page. However, jQuery UI requires a solution that does not require manually changingz-indexthe value. This universal solution is achieved throughui-frontclass, usually accompanied by the stacking widget'sappendTooption.

ui-front class

ui-frontThe class is very basic. It simply sets a staticz-indexvalue. However, the class is there to indicate where stacking elements should be appended. This allows us to utilize nested layer content and generate a default DOM position that works in most cases.

Note: When usingui-frontyou must setpositionisrelative、 absoluteorfixedin order to applyz-index。

Stacking technique

Any widget that appends stacking elements to the page must use theui-frontclass, and in most cases, should have anappendTooption. Stacked elements should follow the rules below:

• If a value is set to theappendTooption, append the stacking element to the specified element.
• If theappendTooption is set tonull(default), the widget should traverse the DOM starting from the associated element. For example, when the autocomplete menu is appended to the DOM, traversal starts from the associated input element.
  • If an element with theui-frontclass is found, append to that element.
  • If no element with theui-frontclass is found, append to the body.
• The stacking element's z-indexpositionmust be set torelative、absoluteorfixedin order to apply theui-frontclass's z-indexz-index. Using it.position()will automatically set itposition。