..::CSS Positioning::..

An Important Tip about CSS positioning

This is a very simple part of CSS positioning. But these simple methods would help you to arrange your web items as you wanted on your web page. Most of the time when browsing the web we can find web pages with overlapped images, buttons and even text. All of them are neatly don by using CSS. My example will explain you how to overlap two ‘div’ elements using absolute positioning. The following coding should appear inside of the ‘ ‘ tags in your HTML page.

“div-A”

Notice my ‘position’ property. It is set to ‘absolute’. You can also set it as ‘relative’. But your result would be different from mine. By setting the ‘top’ property to 30px, I brought the starting point of div-A, 30px from top corner of the browser. Then I positioned the starting point of div-A, 40px right from the right corner of the browser by setting the ‘left’ property into 40px. Like this you can push your div elements where ever you want, by using this absolute positioning method.
Now I’m going to create another div called ‘div-B’ and position it on top of ‘div-A’.


<div style=”background-color:red;
width:90px;
height:90px;
position: absolute;
top:60px;
left:70px;

“div-B”

To add more action on your page make your div elements transparent by using the property named ‘opacity’. And set its value between 1.0 – 0.0. (This format of assigning values for opacity might not work in IE (internet explorer). but guarantee for Firefox.). Now they act as ‘layers’.
Like this if you want to position your images and buttons, just simply put them in to a ‘div’ and place them where ever you want. Your free to do experiments with this cods and make your web pages looks perfect. Cool huh!

result

Result

Advertisements

One Response to “..::CSS Positioning::..”

  1. Akila Says:

    Machan,This is great work.
    Is this work using for html?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: