The z–index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Use the Z-index options to position the overlapping elements.
Z-index value: auto | number | initial | inherit;
When creating a complex layout, the new advanced flexbox system will be of tremendous help. Flexbox is available only in Zion Builder Pro version.
Display: This defines a flex container; inline or block, inline-flex, inline-block, or none depending on the given value. It enables a flex context for all its direct children.
Visibility: This option sets visibility for the element – hidden or visible.
overflow property specifies what should happen if content overflows an element’s box – visible, hidden, and auto.
Flexbox container options
Flex direction: This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
Align items: This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the
justify-content version for the cross-axis (perpendicular to the main-axis).
Available values: flex-start | center | flex-end | stretch | baseline;
stretch(default): stretch to fill the container (still respect min-width/max-width)
self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the
flex-directionrules or the
self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
Justify content: This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
flex-start(default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
Wrap: By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
nowrap(default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
Align content: This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how
justify-content aligns individual items within the main-axis.
start: items packed to the start of the container. The (more supported)
end: items packed to the end of the container. The (more support)
flex-directionwhile end honors the
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
stretch(default): lines stretch to take up the remaining space
Flexbox child options
Align self: This allows the default alignment (or the one specified by
align-items) to be overridden for individual flex items.
Available options: flex-start | flex-end | center | baseline | stretch;
Order: By default, flex items are laid out in the source order. However, the
order property controls the order in which they appear in the flex container.
Available options: first | last | custom;
Grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have
flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
Shrink: This defines the ability for a flex item to shrink if necessary.
Basis: This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.
Position: property specifies the type of positioning method used for an element (static, relative, absolute, or fixed).
Floating: property specifies how an element should float.
float property can have one of the following values:
- left – The element floats to the left of its container
- right – The element floats to the right of its container
- none – The element does not float (will be displayed just where it occurs in the text). This is default.
Clear: property specifies what elements can float beside the cleared element and on which side.
clear property can have one of the following values:
- Left – Indicating that the element is moved down to clear past left floats.
- Right – Indicating that the element is moved down to clear past right floats.
- Both- Indicating that the element is moved down to clear past both left and right floats.