YouTip

# jQuery UI API – Stacking Elements Widgets that stack or move in front of other elements often face challenges when placed in real-world pages. Conflicts on the page are typically avoided by simply changing the `z-index` of the stacking element or its parent. However, jQuery UI requires a generic solution that doesn't require manually changing `z-index` values. This is accomplished through the `ui-front` class, often accompanied by the `appendTo` option on the stacking component. ## The `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 stacking elements should be appended. This allows us to leverage nested layer content to generate a default DOM position that works in most cases. _Note: When using `ui-front`, you must set `position` to `relative`, `absolute`, or `fixed` for the `z-index` to apply._ ## 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 `appendTo` option, append the stacking element to the specified element. * If the `appendTo` option is set to `null` (default), the widget should traverse the DOM starting from the relevant element. For example, when an autocomplete menu is appended to the DOM, traversal starts from the relevant input element. * If an element with the `ui-front` class is found, append to that element. * If no element with the `ui-front` class is found, append to the body. * The `position` of the stacking element must be set to `relative`, `absolute`, or `fixed` for the `z-index` from the `ui-front` class to apply. Using [.position()](#) will automatically set the `position`.