Latest web development tutorials

jQuery UI API - stacking element (Stacking Elements)

Stacked or moved to other elements of the front of the widgets (Widgets) when placed into the real world when a page is often a challenge. Usually by simply changing the stacking element z-index to avoid conflicts on the page or parent element. However, jQuery UI requires a need to manually change the z-index generic solution value. This is done by ui-front , class to complete, usually accompanied by a stacked assembly appendTo options.

ui-front , class

ui-front , class is very basic. It is only in a static element set z-index value. However, class is used to indicate the presence of stacked elements to append to go. This allows us to use nested generating the contents of a location in the default DOM can be used in most cases.

Note: When using ui-front , you must set the position as relative , absolute or fixed , in order to apply z-index .

Stacking (stacking technique)

Any additional widgets stacked elements to the page must use ui-front , class, and in most cases, there should be a appendTo option. Stacked elements should follow the following rules:

  • If a value is set to appendTo option is appended to the stack elements specified element.
  • If appendTo option is set to null elements (default), the widget should be related to the start traversing DOM. For example, when the automatic completion (autocomplete) menu is appended to the DOM, began to traverse from the input element related.
    • If one is found with ui-front element class, then appended to the element.
    • If you do not find with a ui-front element of class is appended to the body (body).
  • Stacking element position must be set to relative , absolute or fixed , to apply from ui-front , class of z-index . Use .position () will automatically set position .