You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: pages/theming/stacking-elements.md
+6-4
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,13 @@
6
6
}
7
7
}</script>
8
8
9
-
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 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.
9
+
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.
10
10
11
11
12
12
13
13
## The `ui-front` class
14
14
15
-
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 where stacking elements should be appended. This allows us to take advantage of nested stacking contexts, resulting in a default DOM position that works for most use cases.
15
+
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 that works for most use cases.
16
16
17
17
*Note: When using `ui-front`, you must also set `position` to `relative`, `absolute` or `fixed` in order for the `z-index` to be applied.*
18
18
@@ -24,6 +24,8 @@ Any widget that appends a stacking element to the page must use the `ui-front` c
24
24
25
25
* If a value is provided for the `appendTo` option, then append the stacking element to the specified element.
26
26
* If the `appendTo` option is set to `null` (default), then the widget should walk up the DOM from the associated element. For example, when the autocomplete menu is appended to the DOM, the walking starts from the associated input element.
27
-
* If an element with the `ui-front` class is found, append to that element.
28
-
* If no element with the `ui-front` class is found, append to the body.
27
+
* If another stacking element is found, append to that element.
28
+
* If no other stacking elements are found, append to the body.
29
29
* The stacking element must also have `position` set to `relative`, `absolute`, or `fixed` in order for the `z-index` from the `ui-front` class to be applied. Using [.position()](/position/) will automatically set `position`.
30
+
31
+
Stacking elements are defined as elements with the `ui-front` class, or any native element that creates a new stacking context. Currently, `<dialog>` is the only native element that is considered a stacking element.
0 commit comments