News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 19 – Positioning

CSS tutorials

The positioning properties can change how and where elements are displayed.

Position

By default, the position property will have the value “static”, which means that it will appear in its regular position and won’t be affected by most positioning properties. If the value is changed to “relative” the element can be positioned relative to its normal position. The value “absolute” detaches the element from any containing elements and lets it be positioned relative to the page itself. The “fixed” value is similar to “absolute”, but a fixed element won’t move when the page is scrolled.

position : static | relative | absolute | fixed

Top, left, right, and bottom

An element with the position property set to anything but static can be positioned with the top, left, right, and bottom properties. These properties cannot only be used to position elements anywhere on the page, but also to resize them horizontally and vertically. They all allow negative length and percentage values.

top | right | bottom | left (positioned) : 
  auto | <length> | <percentage>

For example, to display selected elements 20 pixels below their regular position the following declarations would be used.

position: relative; 
top: 20px;

Overflow

The overflow property is by default set to “visible”, meaning that text which expands beyond the block element’s border will be visible. Setting the value to “hidden” will hide the overflowing text and with the “scroll” value the element’s block will become scrollable. The value “auto” is similar to scroll, but the scrollbars will only appear when they are necessary.

overflow (block) : visible | hidden | scroll | auto

Clip

The clip property can clip an element into a rectangle if it is positioned as either “fixed” or “absolute”. It uses a CSS function called “rect” to specify the clipping region. The property won’t have any effect if overflow is set to “visible”.

clip (fix/abs positioned) : 
  auto | rect(<top>, <right>, <bottom>, <left>)

Z-index

Z-index is used to place an element behind or in front of another element. It only applies to positioned elements, meaning elements using the position property with any value but “static”. This property takes a positive or negative integer as its value. Elements with higher stacking order will be in front of elements with lower values. Note that the default z-index is “auto”, meaning a positioned element will be layered according to its order in the code.

z-index (positioned) : auto | <integer>

Vertical-align

Vertical-align sets the vertical alignment of an inline element. By default, an inline element, such as an image, will align at the baseline of the parent element. The “middle” value will align the element at the middle of the line, “bottom” aligns it to the lowest element at the line, and “top” aligns it to the top of the highest element on the line. The “text-bottom” value aligns the bottom of the element to the bottom of the parent element’s text and “text-top” aligns the top of the element to the top of the text. The “sub” value aligns the element to the subscript position and “super” to the superscript position. The element can also be raised or lowered with either a length value, which will be relative to the baseline, or with a percentage value, which will be relative to the line height.

vertical-align (inline) : 
  baseline | <length> | <percentage> | sub | super | 
  bottom | text-bottom | middle | top | text-top
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours