Position property allows you to set the position of the element. The position property can be used in association with the bottom, left, right and top properties. The different positioning schemes are: static, relative, absolute, and fixed.

Static

The element is positioned in a normal flow of the display. Here, you do not use the "left" and "top" properties. It is the default value.

Relative

The element is moved relative to its normal position. It means it is moved at an offset distance relative to the initial  position. The top, left, right, and bottom properties define how many pixels from the top, left, right and bottom respectively of its normal position you want the element to appear.

top

15 px, will move down the element 15 pixels from its usual position, whereas top : -15 px, will move up the element 15 pixels from its usual position.

left

15px will move the element right and negative values will move it left. 

right

15px will have the same effect as with  left: -15px, with relative positioning.

bottom

15px will have the same effect as with the top: -15px, with relative positioning. 

Absolute

The element is positioned anywhere on the page, with an absolute value. Absolute value means the exact pixel value where the element is to appear. You can set the position with the left, right, top, and bottom properties. 

Fixed

The element is fixed at a position, with a fixed value. This element will not scroll or appear on every printed page.

Clear property is used in conjunction with float property. Images and text elements that appear in another element are called floating elements.

• With clear property you can specify whether an element can have other elements floating alongside it or not.

• You can also specify where an element is to be placed, i.e. on which side the floated elements should be placed.

• Clear property can have values : none, left, right, both.
  none - This allows floating on either side. Floated elements will flow around the content.
  left - This element doesn't allow floating on its left side. It clears all left-floated elements and places the element underneath.
  right - This element doesn't allow floating on its right side. It clears all right-floated elements and places the element underneath.
  both - This element doesn't allow floating on either side. It clears all floated elements and places the element underneath.

• By default the clear property is set to none.

   

Element has not been cleared from either side.

This property defines the shape of the cursor, when the mouse is moved over a selected element. The possible values for cursor property are defined below along with their corresponding examples. You can move the mouse over each property and see the difference.

Default

This is the default cursor, it is usually an arrow sign.

Auto

The browser determines the cursor, it is usually a sign resembling 'I'.

Crosshair

The cursor is rendered as a crosshair. It usually resembles a plus (+)  sign. 

Pointer

The cursor is a pointer indicating link, it usually looks like a 'hand'.

Move

The cursor indicates that something is to be moved. It is usually a four-way arrow.

E-Resize

The cursor indicates that an edge is to be moved right-side (east). It is usually an arrow pointing right.

Ne-Resize

The cursor indicates that an edge is to be moved up and right (north-east). It is usually an arrow pointing north-east.

Nw-Resize

The cursor indicates that an edge is to be moved up and left (north-west). It is usually an arrow pointing north-west.

N-Resize

The cursor indicates that an edge is to be moved up (north). It is usually an arrow pointing north.

Se-Resize

The cursor indicates that an edge is to be moved down and right (south-east). It is usually an arrow pointing south-east.

Sw-Resize

The cursor indicates that an edge is to be moved down and left (south-west). It is usually an arrow pointing south-west.

S-Resize

The cursor indicates that an edge is to be moved down (south), usually an arrow pointing south.

W-Resize

The cursor indicates that an edge is to be moved left (west), usually an arrow pointing west.

Text

The cursor indicates text usually rendered as an ' I ' beam.

Wait

The cursor indicates that the program is busy and the user should wait. It usually looks like a watch or hourglass.

Help

The cursor indicates that help is available about the element on which the cursor is moved. It is usually rendered as a question mark or a balloon.

This property is used to control the display of a section. The display property have values:

None

The element will not be displayed.

Block

A block box, i.e. a line break before and after the element, will be displayed.

Inline

An inline box, i.e. no line break before and after the element, will be displayed.

List-Item

A list-item marker is added, having a line break before and after the element.

Run-In

The element will be displayed either as an inline or block box depending on the context.  If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. This element is not currently supported by Internet Explorer.

Compact

The element will be displayed either as an inline or block box depending on the context. This element is not currently supported by Internet Explorer.

Table

The element will be displayed as a block level table. It is not currently supported by Internet Explorer.

Inline-Table

The element will be displayed as an inline level table. It is not currently supported by Internet Explorer.

Table-Row-group

The element will be displayed as a group of one or more rows, similar to the HTML <tbody> element. It is not currently supported by Internet Explorer.   

Table-Header-group

The element will be displayed as a group of one or more rows, similar to the HTML <thead> element. It is not currently supported by Internet Explorer.

Table-Footer-group

Here also, the element will be displayed as a group of one or more rows, similar to the HTML <tfoot> element. It is not currently supported by Internet Explorer.

Table-Row

The element is displayed as a table row, similar to the HTML <tr> element. It is not currently supported by Internet Explorer.

Table-Column-group

The element will be displayed as a group of one or more columns, similar to the HTML <colgroup> element. This is not currently supported by Internet Explorer.

Table-Column

The element will be displayed as a column of cells, similar to the HTML <col> element. This is not currently supported by Internet Explorer. 

Table-Cell

The element will be displayed as a table cell, similar to the HTML <td> and <th> elements. This is not currently supported by Internet Explorer. 

Table-Caption

The element will be displayed as a table caption, similar to the HTML <caption> element. It is not currently supported by Internet Explorer.

Pixel stands for Picture Element. A pixel is the smallest part of the fine-grained mosaic that makes up a monitor display.

The elements simply stack up underneath until thay are placed in some other manner. Floats are boxes that take up an element out of the flow and place it to the left or right of the container block, while other text wraps around them.

• Possible values for float are: none, left, and right.

None

The element will be displayed naturally in the flow of its page.

Left

The element will be treated as a block element and is placed to the left of the rest of the contents of its parent element.

Right

The element will be treated as a block element and is placed to the right of the rest of the contents of its parent element. By default, the float property is set to none.

The image is placed to the left of the rest of the contents.

The visibility property determines whether an element is visible or invisible.

• Visibility property adds dynamic effects on the web page.
• Even if an element has been made invisible, it still occupies space on the page and other content may not fill that space.
• Possible values for visibility property are: visible, hidden and collapse.
    Visible - It determines that the element will be visible on the page.
    Hidden - It determines that the element will not be visible on the page.
    Collapse - It has the same effect as hidden, except when applied in conjunction with table elements. The hidden row or column space can be used for other content.
• By default, elements are visible.

In this chapter you have learnt:

• The box model
• Setting the position of the element and various positioning schemes possible
• Changing the shape of the cursor
• Controlling the display of a section of block
• Changing the visibility of an element

Fill in the Blanks

1. According to box model, each element is considered as a rectangular area, surrounded by _____, _____ and _____.
2. Different positioning schemes possible are ____, relative, absolute and ____.
3. Clear property is used in conjunction with the _____ property.
4. The default value for float property is _____.
5. _____ value of visibility property determines that elements will not be visible on a page.

1. Padding, border and margin
2. Static, fixed
3. Float
4. None
5. Hidden

True or False

1. Position property allows you to explicitly move an element at a desired location.
2. If clear property is set to none, then the elements on either side are cleared.
3. By default, clear property is set to none.
4. The default cursor shape shows an 'I' sign.
5. The default value for visibility property is hidden.

1. True
2. False
3. True
4. False
5. False

The next chapter will acquaint you with the basic concepts of pseudo classes and pseudo elements. The chapter will further elucidate how to add special effects to certain elements.

                Hop over to the next chapter to get a pseudo classes and pseudo elements close-up.