{"id":14,"date":"2023-08-25T17:38:05","date_gmt":"2023-08-25T17:38:05","guid":{"rendered":"\/\/api.jqueryui.com\/1.10\/?page_id=14"},"modified":"2023-08-25T17:38:05","modified_gmt":"2023-08-25T17:38:05","slug":"stacking-elements","status":"publish","type":"page","link":"https:\/\/api.jqueryui.com\/1.10\/theming\/stacking-elements\/","title":{"rendered":"Stacking Elements"},"content":{"rendered":"

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

link<\/span><\/a> The ui-front<\/code> class<\/h2>

The ui-front<\/code> class is very basic. It just sets a static z-index<\/code> value on the\nelement. However, the existence of the class is used to indicate where stacking\nelements should be appended. This allows us to take advantage of nested stacking\ncontexts, resulting in a default DOM position that works for most use cases.<\/p>\n

Note: When using ui-front<\/code>, you must also set position<\/code> to relative<\/code>,\nabsolute<\/code> or fixed<\/code> in order for the z-index<\/code> to be applied.<\/em><\/p>\n

link<\/span><\/a> The stacking technique<\/h2>

Any widget that appends a stacking element to the page must use the ui-front<\/code>\nclass, and in many cases should have an appendTo<\/code> option. The following logic\nshould be applied to the stacking element:<\/p>\n