Normal layout will lay boxes one after the other or below one another
(block or inline). Floating will shift boxes to the left or right.
Absolute positioning puts an element at the specified (left, top)
coordinates regardless of what other elements already exist at that
position. Fixed positioning will cause the element to be fixed to that
position. They stay put even when scrolling.

When using absolute or fixed the element is implcitly displayed as a
block and therefore the display property is ignored. Default value for
position is static. Elements are placed relative to their parent and the
elements that precede them. The parent or container for a fixed position
element is the computer screen. The containing block for absolute
positioned elements is the top parent, the root, unless there exists
another element such that it is the parent of this element and has a
position of absolute, relative of fixed, in which case, the absolute
coordinates are calculated based on that element.

When an absolutely positioned element is inside some other absolutely or
fixed position element, the edges of the containing block will be used
to calculate the top, left, right coordinates. For elements placed
inside a relatively positioned that is inline, the container may be
split up over several lines and thus having several boxes. In this case,
the top and left of the first box will be the top, left for the
containing block and the bottom, right for the last block will be the
bottom, right for the containing block.

Relative position positions elements away (top, left, bottom, right)
from their normal position without influencing the other elements. This
may cause overlap between elements without ‘pushing’ or ‘moving’ the
neighboring elements. Using percentages as the values for left & right
will cause the position to be calculated from the width of the block
element or the width of the containing block for inline elements.

Fixed position positions elements at the specified area no matter how
the document is scrolled. It will appear at the same position on every
page.

Using auto values for absolutely position elements will cause the
browser to set the values to approximates based on where the element
might be placed if it were normally positioned.

Using auto values for width and right for absolutely positioned elements
will cause the width to be maximized, the right to 0, simulating a right
align.

Z-Index, positioning on the z-axis

Top, left, bottom, right values allow elements to be placed on a 2-D
plane. This can lead to several elements overlapping each other. Setting
the z-index property value will allow to determine the stacking order
for overlapped elements. Normally elements are stacked in the order they
appear in the code.

Assigning a value to the z-index property will cause the element to
stacked in order in the containing block. Positive values will cause the
element to be stacked in front of the containing block positioning
elements with the higher values in the front. A negative value will
position the element behind the containing block in decreasing
magnitude. z-indexes are calculated relative to the first container that
has a z-index value other than auto.

Advertisements