Updated by Svija · up one level

Z Index & Load Order

Svija draws pages in the following order:

  1. page
  2. components

Both pages and components can contain sub-elements, loaded in the following order:

  1. javascript (in the head)
  2. CSS
  3. SVG + HTML + form
  4. javascript (in the body)

Z Index: Components

Components have a setting called Z index that determines the order in which they are drawn.

  1. Components with a low Z index are drawn first, and are behind
  2. Components with a high Z index are drawn last, and are in front

Changing the Z index of a component moves it backwards and forwards among other components, but never behind a page.

NOTE: when a component is included via page settings, the Z Index set there overrides the component’s original Z Index.

The Z index must be between 0 and 32767.

Load Order: Scripts Included with Other Elements

Pages, Script Sets and Components can contain scripts. These are included in the following order:

  1. javascript in the head
  2. CSS
  3. SVG + HTML + form
  4. javascript in the body

The overall groups never change order, but within each group the order of inclusion is:

  1. scripts associated with a Page
  2. scripts associated with Script Sets
  3. scripts associated with Components

For example:

  • CSS code in page settings will be applied before CSS code in component settings
  • the SVG and HTML associated with a page will be behind the SVG and HTML of a component

A Dive into the Weeds

Scripts associated with pages, script sets and components stay together.

For example, the “Body JS” scripts included with a component are:

  • ordered amongst themselves using the Load Order setting
  • executed before or after other component’ scripts according to the parent component’s Z Index