Positioning of HTML Content

Positioning an HTML block in a web document is known as a layer. A layer can be created in two ways :

  1. Javascript positioning
  2. CSS positioning

Javascript creates a layer object for each layer that is defined. Using the layer object you can write Javascript code to move, hide, expand, contract, and change the overlapping sequence of layers. Even new layers and the content of existing layers can be changed dynamically. Dynamic animations and self-modifying pages are also possible.

In Javascript, the positioning is done by using the <layer> or <ilayer> tag. In Cascading Style sheets positioning layers are defined by using the position property. It is better that you use CSS positioning because it is supported by all browsers unlike the <LAYER> which is supported only by Netscape Navigator 4.0 or higher. The following table lists all the attributes, which you can specify when defining layers for both CSS and <layer> tag syntax :

CSS attribute<LAYER> attributeVALUE
Background-colorBGCOLORA named color or a 6-digit, hexadecimal value such as #00FF00.
Background-imageBACKGROUNDURL of the image
CLIPCLIPThe boundaries of the visible area of the layer. The value is a comma-separated set of numbers that specify the left, top, right and bottom values in pixels
HEIGHTHEIGHTRepresents the height of the clipping region. The value can be expressed as the number of pixels or as a percentage of the height of the containing layer.
IDIDThis attribute is used to give a name to the layer
LEFT, TOPLEFT, TOPThe horizontal and vertical positions of the top left the corner of the layer within the document or within its containing layer specified in the number of pixels.
onMouseOver, onMouseOut,on Focus, onBlur, onLoadThe value is either a Javascript function or code.
PAGEX, PAGEYThe horizontal and vertical positions of the top left the corner of the layer relative to the document specified in the number of pixels.
POSITIONUsed for layers that are defined as style. The values can be absolute or relative.
Source-includeSRCURL of an external file that contains an HTML formatted text to be displayed in this layer.
WIDTHWIDTHRepresents the width at which the contents of the layer are wrapped. Its value can be the number of pixels or as a percentage of the width of the containing layer.
Z-INDEXZ_INDEX,ABOVE,BELOWThe value must be a positive integer for Z-INDEX. The ABOVE and BELOW attributes specify the ID attribute value which represents the layer just above or below the current layer.


CSS Positioning


Whenever you define a style for positioning HTML blocks the style definition always includes the position property. The position property can take two values :

Absolute specifies a layer with an absolute position within its containing layer.

Relative specifies a layer with a position relative to the current position in the document.


Absolute positioning


By absolute positioning, you can specify the upper left corner of the HTML content for the specified layer. The following example illustrates the use of absolute positioning property.





 Relative Positioning


This property allows you to specify an offset for the layer relative to the natural position of the layer in the flow of the HTML document. Modify the position property in the above example to relative and see the change in the output.


Code –