Stacking elements

Stacking Elements

Widgets that stack, or move in front of other elements, often present challenges when placed into real world pages. It's usually easy to either change the z-index or the parent of the stacked element to avoid any collisions on the page. However, jQuery UI needs a generic solution that doesn't require manually playing with z-index values. This is accomplished via the ui-front class, and usually an accompanying appendTo option on stacking widgets.

The ui-front class

The ui-front class is very basic. It just sets a static z-index value on the element. However, the existence of the class is used to indicate that an element is a stacking element, which indicates where additional stacking elements should be appended. This allows us to take advantage of nested stacking contexts, resulting in a default DOM position tha