Updated by Svija · up one level

Z Index & Load Order

Svija draws pages in the following order:

  1. page
  2. modules

Both pages and modules 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: Modules

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

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

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

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

The Z index must be between 0 and 32767.

Load Order: Scripts Included with Other Elements

Pages, Script Sets and Modules 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 Modules

For example:

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

A Dive into the Weeds

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

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

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