Skip to content

Commit ad42c59

Browse files
committed
Stacking Elements: Remove hard wrapping
Ref gh-258
1 parent a0912d1 commit ad42c59

File tree

1 file changed

+7
-23
lines changed

1 file changed

+7
-23
lines changed

pages/theming/stacking-elements.md

+7-23
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,24 @@
66
}
77
}</script>
88

9-
Widgets that stack, or move in front of other elements, often present challenges
10-
when placed into real world pages. It's usually easy to either change the `z-index`
11-
or parent of the stacked element to avoid any collisions on the page. However,
12-
jQuery UI needs a generic solution that doesn't require manually playing with
13-
`z-index` values. This is accomplished via the `ui-front` class, and usually an
14-
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 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.
1510

1611

1712

1813
## The `ui-front` class
1914

20-
The `ui-front` class is very basic. It just sets a static `z-index` value on the
21-
element. However, the existence of the class is used to indicate where stacking
22-
elements should be appended. This allows us to take advantage of nested stacking
23-
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 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.
2416

25-
*Note: When using `ui-front`, you must also set `position` to `relative`,
26-
`absolute` or `fixed` in order for the `z-index` to be applied.*
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.*
2718

2819

2920

3021
## The stacking technique
3122

32-
Any widget that appends a stacking element to the page must use the `ui-front`
33-
class, and in many cases should have an `appendTo` option. The following logic
34-
should be applied to the stacking element:
23+
Any widget that appends a stacking element to the page must use the `ui-front` class, and in many cases should have an `appendTo` option. The following logic should be applied to the stacking element:
3524

36-
* If a value is provided for the `appendTo` option, then append the stacking
37-
element to the specified element.
38-
* If the `appendTo` option is set to `null` (default), then the widget should
39-
walk up the DOM from the associated element. For example, when the autocomplete
40-
menu is appended to the DOM, the walking starts from the associated input element.
25+
* If a value is provided for the `appendTo` option, then append the stacking element to the specified element.
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.
4127
* If an element with the `ui-front` class is found, append to that element.
4228
* If no element with the `ui-front` class is found, append to the body.
43-
* The stacking element must also have `position` set to `relative`, `absolute`,
44-
or `fixed` in order for the `z-index` from the `ui-front` class to be applied.
45-
Using [.position()](/position/) will automatically set `position`.
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`.

0 commit comments

Comments
 (0)