Positioning of text block with attributes top left z-index padding in div tag

We can position a text block inside a web page by using div tag. We can specify its exact location or relative location of the block by setting some of the attributes of the div tag. If we are using more than one div element then we can identity them by using id and stack them one over the other by specifying the z-index of the tag.

This way we can place the div block over any place inside the page. We will learn here different attributes with some examples.

id:

This is the unique identification tag for the div element. We can apply many controls to the div block by using this id tag. In a page it is useful when we have more than one div tag. We will see its uses in our next examples.

More on Div Tag DIV Tag Mouseover Div Layer on links OnClick & onDblClick of Div Show & Hide Div Layer Help message Layer

Width:

This tells the width of the block.

Height:

This tells the height of the div block.

TOP:

This gives the position of the div block from the top border of the page in pixels. Top:50 mean the block is located 50 pixels down from the top border of the page.

LEFT:

This specifies the horizontal position of the div tag. Left:80 mean the div block located 80 pixels from the left border of the page.

Z-index:

This is to tell the browser which layer comes over which layer, by specifying this number to higher value we can say the layer with higher value comes over the layer with lower Z-index value. Using this we can stack layers one over the other. Padding: Like cellpadding of the table this keeps a distance from the edges of the div element. By specifying padding we can maintain a margin between text and border of the div element. We can say padding:20 , it mean the text inside the div tag will maintain a margin of 20 pixels from the borders of the div elements

Border:

We can add border to our div tag and specify its color size and style. Here is one example. border: #0000cc 2px dashed; We can write solid, dotted in place of dashed style specification. If we don't want we can remove this border property also.

position:

Relative position we can specify where the div element takes the position relative to its actual position ( or position without any value specified ) we can specify the position as absolute or relative

Here is code for a div tag


<div id='my_page2' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #0000cc 2px  dashed; ">
This is inside div tag  text  
</div>

This is inside div tag text

Position relative will push down other elements of the page , where position: absolute will not push other element.
DIV tag DEMO : position relative & absolute Mouseover of link showing message box

sumant	29-05-2011
very good tutorial

sun	09-03-2013
excellent! thank you.

How to position a div tag inside a page?

id: