CSS Elements Display

In this tutorial you will learn about Cascading Style Sheets (CSS) – Elements Display, Float, Position, Visibility, Cursor, Vertical align and z-index.

The display properties enable you to set the way to display elements and the position of the element relative to another element or to the whole document.

Float

To set the appearance of an element or an image relative to another element, use the property “float”, this property can have on of the following values:

left, right, or none.

Example:

img
{
float: left;
}

This sets the image position to be at the left of the element.

Position

To set the position of an element, use the property “position”, this property can have on of the following values:

• absolute: relative to the parent element.
• relative: relative to the normal position of the element.

Example:

h3
{
position: relative;
right: 10px;
}

This will position the < h3 > tag at 10 pixels to the right relative to its original position.
The “position” property just defines the position and it needs one of the following properties:

“top”, “right”, “bottom”, and “left”

These properties declare the amount as an absolute value or a percentage.

Visibility

To set if an element will be visible or invisible, use the property “visibility”, it van have one of the following values:

visible or hidden.

Example:

.hide
{
visibility: hidden;
}

This will make the element that uses this class to be invisible when the document is rendered.

Cursor

To set the type of the cursor, use the property “cursor”, this property can have one of the following values:

crosshair, help, move, pointer, text, url, wait, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, or w-resize.

Example:

body
{
cursor: crosshair;
}

This sets the cursor of the whole document to crosshair.

Vertical align

To set the vertical alignment of an element, use the property “vertical-align”, this property can have one of the following values:

sub, super, top, bottom, middle, text-top, text-bottom, an absolute value, or a percentage.

Example:

td
{
vertical-align: top;
}

This sets the contents of the table cell to be in the top.

z-index

If there are elements that overlap, and you want to display them as layers, you can define the order of the element using the property “z-index”, the value is a number that represents the element order.

Example:

img
{
z-index: -1;
}

This will place the < img > element behind all other elements.