Positioning with CSS3

Section 1: Positioning

In CSS, each of these boxes has a position in three dimensions: height, width, and depth.

• Three positioning schemes are used for the horizontal and vertical positioning (along the x and y axes) of boxes
  • the normal flow (which includes relative positioning)
  • floating
  • absolute positioning (which includes fixed positioning)

Section 2: Relative Positioning

Relative positioning changes the position of the HTML element relative to where it normally appears.

• If we had a header at the top of the page, relative positioning could be used to move it a bit to the right and down a couple of pixels.

Relative positioning is grouped with normal flow because when an element specifies position:relative it is initially positioned following the normal flow rules.

• Surrounding boxes are positioned accordingly.
• The rendered box is then shifted vertically (according to the top or bottom property) and/or horizontally (according to the left or right property).
• The properties top, right, bottom, and left can be used to specify by how much the rendered box will be shifted.
  • A positive value means the box will be shifted away from that position, towards the opposite side. For instance, a left value of 20px shifts the box 20 pixels to the right of its original position.
  • Applying a negative value to the opposite side will achieve the same effect: a right value of -20px will accomplish the same result as a left value of 20px.
  • The initial value for these properties is auto, which makes the computed value 0 (zero)—that is, no shift occurs.
• If the relative shift is significant, it will leave a "hole" in the flow, in which case the rendered box may overlap other content.
• See this site for more details. The CSS3 spec is here.

Section 3: Absolute Positioning

An element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.

• the element box can be absolutely positioned using the 'top', 'left', 'right', and 'bottom' properties using the element box's containing block as the origin.
• If the value of the position property is absolute, the containing block is the nearest positioned ancestor – in other words, the nearest ancestor whose position property is absolute, fixed, or relative.
• An absolutely positioned element will overlap other content unless we make room for it in some way; for instance, by setting margins or padding on other elements.
  • The contents of an absolutely positioned element do not flow around any other boxes, but may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
  • Text will not flow around an absolutely positioned element.
• An absolutely positioned element establishes a containing block for any elements within it.
  • They can even contain other absolutely positioned elements, which are likewise removed from the normal flow within the containing block, so they can appear outside of the bounds of the containing element.
  • Descendent elements follow the same positioning rules they normally would, just offset by the position of the containing element.
• Demo page.

Float

Float was covered in the Intermediate CSS notes.

More float notes:

• Float only applies to elements that generate boxes that are not absolutely positioned.

Section 4: Fixed Positioning

This value behaves like 'absolute' in all respects, but additionally, the positioned element box is fixed with respect to a reference point.

• In scrolling media, it is in reference to some fixed point on the screen.
• In paged media (printing) it will be in reference to a point on the page.
• The positioned element will not move with respect to that stationary point, e.g., it will not move when the screen is scrolled.

Section 5: Stack Level

The stack level refers to the position of the box along the z axis, which runs perpendicular to the display.

• The z-index property affects the position of an element on the Z-axis, which refers to how an item is stacked perpendicular to the display (instead of Y-Axis and X-Axis which refer to elements positioned parallel to the display).
• The higher the value, the closer the box is to the user; in other words, a box with a high z-index will obscure a box with a lower z-index occupying the same location along the x and y axes.

Section 6: Links

Links about Positioning

• CSS Positioning 101 – be sure to click on the demos
• Learn CSS Positioning in Ten Steps
• Tizag tutorial with demo

Links about Z-index

• A Detailed Look at the z-index CSS Property
• The stacking context
• Stacking Order
• Demo