Position Absolute And Relative Tips And Tricks

[sirtiner]

Hi everyone, im going to give you a little Position absolute and relative “trick”, you might already know this but for you who doesn't know this it’s kind of useful.

So let’s say you have a div (box) that you have a float on and you want to position a image without messing up the content or whatever you might have in there, by using position instead of using a floats for this will give us the option of moving this around without messing up everything else, now it’s not going to give you any extra space and such so you better know that you will have room for it. (im not saying this is the only option but it’s a good one).

Let’s create a small header where we have a text and we also want to display an image, let’s also make the image as a link.



And our image



The HTML Part

<div class=”small-header”>
    <h2>Full Tilt Poker</h2>
    <div class=”position”>
        <a href="#"><img src=”images/full-tilt-poker-img.png" alt="Full Tilt Poker" /></a>
    </div>
</div>

The CSS Part
Ok so the class “.position” have a position:relative; this means that our link (“.position a” that is an absolute) will only live inside of our “.position” and our “.position” will be the same size (we didn’t give it a size so it will be as big as the parent) as our div .small-header since this is the “parent” did you get that?.
Now in our case we have a link inside of this, .position a, we could of course have img instead of an a, but since it’s going to be a link we give this one an a.
Giving .position a an position:absolute; we can now move this around inside of our “.position” that is a child of .small-header without affecting our H-tag.

I also just give this a bit of styling such as text shadow.

.small-header {
float:left;
width:422px;
height:34px;
background:url(../images/header-small.png) no-repeat;
}
.small-header h2 {
font-size:20px;
font-family:arial;
font-weight:normal;
color:#5b5b5b;
margin:4px 0 0 20px;
text-shadow:#ececec 1px 1px 2px;
}
.position {
position:relative;
}
.position a {
position:absolute;
right:30px;
bottom:0px;
}

If we instead gave our class “.position” an

position:absolute;
right:0;
bottom:0;

Then it would end up being like PAL had with that CAL image that everyone hated, class “.position” would then live inside of the whole screen, you wouldn’t want to have that inside our .small-header, better to have that before end </body> so the browser load that last.
So if you wanted a Page peel, don’t know how popular they are but you just create your graphic or whatever and give it a

position:absolute;
right:0;
top:0;

Now its top right, couldn’t be easier.

And here it is, so you can see what we have done, I have added some text and such otherwise it would look a bit empty