Positioning Elements

display

display property is used to specify the type of rectangular box for an html element. Every element is a rectangular box in html. Try to select an element using your mouse pointer and you will realize what I'm talking about. Possible value of display property are:

• block - adds line break at the start and end of an element and covers the whole available width
• inline-block - adds line break at the start and end of an element and covers just the width of the content of the element
• inline - generates inline-box which doesn't contain line breaks at the start or end of the element
• none - does not display the element

There are other possible values too for display property such as list-item, run-in, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption and inherit.

Syntax for using display property:

p
{
    display:inline;
}

position

position property handles the positioning of html elements. Possible values of position are:

• static - This is the default position property. All elements are placed according to normal flow.
• relative - This is similar to static property with few exceptions. Position with relative property can use top, left, right, and bottom properties to set elements position. Also z-index property has effect only on absolute and relative positioned element.
• absolute - This property breaks the normal flow for positioning the element. Its set the elements position relative to its relative(or absolute) positioned parent element. If no parent element with relative(or absolute) value is present then the absolute positioned element will position itself relative to the page itself. The element is going to move on scrolling.
• fixed - This property also breaks the normal flow for positioning the element and the element is not going to move on scrolling that's why the name fixed. The element's position can be set using top, left, right, bottom properties and its position is set relative to the viewport.

Syntax for using position property:

div
{
    position:fixed;
}

top

top property specifies the top margin for an element. In other words, it decides how far the element should be placed from top end of the viewport (web browser). This property only works for elements whose display property is set to absolute, fixed or relative.

Syntax for using top property:

div
{
    position:absolute;
    top:50px;
}

right

right property specifies the right margin for an element. In other words, it decides how far the element should be placed from right end of the viewport (web browser). This property only works for elements whose display property is set to absolute, fixed or relative.

Syntax for using right property:

div
{
    position:absolute;
    right:50px;
}

bottom

bottom property specifies the bottom margin for an element. In other words, it decides how far the element should be placed from bottom end of the viewport (web browser). This property only works for elements whose display property is set to absolute, fixed or relative.

Syntax for using bottom property:

div
{
    position:absolute;
    bottom:50px;
}

left

left property specifies the left margin for an element. In other words, it decides how far the element should be placed from left end of the viewport (web browser). This property only works for elements whose display property is set to absolute, fixed or relative.

Syntax for using left property:

div
{
    position:absolute;
    left:50px;
}

clip

clip property is used to clip an element according to a specified shape. This property only works on absolute positioned elements. Possible values are:

• shape - Right now, the only valid shape value is rect(top, right, bottom, left). Inside rect() we pass top corner, right corner, bottom corner and left corner coordinates.
• auto - No clipping
• inherit - inherits the property of its parent

Syntax for using clip property:

img
{
    position:absolute;
    clip:rect(0,50,50,0);
}