Position



In addition to Display and Auto Layout settings, you can use Position to set the position of elements on a web page. 

With these settings you can control the position of an element on a page relative to its original position, parent element, or browser window.

With positioning, you can change the flow of elements on a page by shifting or fixing them. 

To setup Position, you need to define:

There are the following types of positioning:

Static position defines a standard position of an element without offset.

An element with static position will stick to the document flow on a web page. Elements with static positioning appear in the order they appear on the Layers tab without overlapping other elements. To assign an element a static value is to remove the position applied to it.

Positioning attributes (top, left, bottom, or right) do not work with such elements.



An element set to relative is positioned relative to its normal position.

In this case, other elements will not adjust to the offset of a relative element. An element with relative positioning can overlap other elements without affecting their position.

Example of using relative positioning: moving an element away and overlapping it with another element.



An element is positioned relative to its parent element, which has non-static position.

Absolute position is used to remove an element from the normal document flow. The position of an absolute element isn’t affected by other elements and doesn’t affect the position of other elements. 

Use the positioning attributes top, left, bottom, and right to set the location. These values will be relative to the next parent element with settings other than static.

Examples of using absolute positioning:



This option is used to fix the position of an element, which will not change when scrolling the page. Fixed elements are positioned relative to the browser window.

To fix an element, you need to specify position attributes top, left, bottom, or right. 

When you scroll down the page, fixed elements stay fixed in their positions.

Examples of using fixed positioning: 



Sticky elements will alternate between relative and fixed positioning based on the viewer’s scroll position.

A sticky element is relative to the document flow until a defined scroll position is reached. At that point, it switches to the behavior of a fixed element within its direct parent. Once the sticky element hits the bottom of its parent, it will stop scrolling.

You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. Position sticky may not work correctly if any parent element has a set height or Overflow other than Visible.

Not all browsers support sticky positioning.

Example of using sticky positioning: creating scrolling effects.



It is usually sufficient to specify one value for the horizontal and one for vertical positioning attribute. Values are specified in pixels and can be either positive or negative.

Example:



In the Position settings, you can also set the Z-index, which is an element’s position on the imaginary z-axis extending into and out of your computer screen.

By default, elements have an auto Z-index and elements at the bottom of the page stack above elements above them, while elements on the right stack above elements to the left. Static elements always stack lower than elements with other types of position.

Positioned elements may overlap other elements in the natural document flow. Thus you can alter the Z-index value of any positioned element to change its default stacking order. 

Z-index values

Elements with a higher Z-index value are displayed in front of elements with a lower value. 

Example of overlapping images with different Z-indexes (the value of the Z-index is indicated next to the picture)

You can select a Z-index value from -1 to 100 from the drop-down list.

With a negative value, you can lose an element as it will be displayed under most other elements.

Z-index on nested elements

When the Z-index is set to auto, the stack order of the element is equal to its parent’s stack order. For example, a child element can never be higher than its parent no matter how high its Z-index value is.