When learning CSS you will no doubt quickly master positioning your divs using floats, margin and padding. There is however another way!
Creating your page with floats, margins and padding creates a stacking effect to your pages with absolute positioning you can place the div element anywhere on your page as long as it is within a bounding area.
Here is a simple example of the CSS code to achieve absolute positioning-
.wrapper {
width:800px;
height:600px;
position:relative;
}
.absolute {
width:200px;
height:200px;
position:absolute;
left: 33px;
top: 39px;
}
And here is the body code -
<body>
<div class=”wrapper”>
<div class=”absolute”></div>
</div>
</body>
The above CSS shows the wrapper of your webpage with standard height and width values, I have also added the position:relative value this means any absolute elements that we specify will remain relative to the boundary of your webpage. I have then created our absolute positioned element class, again with standard values but this time the position value is absolute. Now using left, top, right, bottom values you can move the element anywhere within or outside your page wrapper.
So basically placing the absolute div within your wrapper as shown in the HTML code example you can place elements wherever you want on your page.
Obviously this can have draw backs, if for example you are wanting to use multiple absolute elements you will need to create separate class’ which can be messy if you are planning on creating a large number of element. But don’t let this put you off, used carefully this can overcome some obstacles in website design, particularly for anyone who is getting started with CSS.