View Full Version : Relative Positioning


Elentari
05-06-2003, 07:02 PM
Ok......I know most things I need to know in CSS but the one thing I don't get is relative positioning.........anyone have any really simple explanations of how that works? Up til now I've only used absolute positioning because relative position makes it do weird things (when I use it...probably cuz I don't understand it)...

Please help.

pb&j
05-07-2003, 03:59 AM
absolution positioning (as you know) will place an object specifically in a spot (usually) measured out from the top left corner.

relative positioning will place an object too, but the starting position will not be from the top left corner of the window. instead, the starting point where the object would have normally appeared without using any css positioning. from that spot it will go X to the left and X to down (or whatever direction you specify using positive or negative numbers).

example time...

Here is a sample of
<b style="position: relative; left: 10px; top: -10px">
raised bold text
</b>
and normal text.

this will make the words "raised bold text" to be placed a bit to the right and up from where it would normally be in the line of text. notice the negative value set for the TOP property. since positioning usually flows towards the right and down, placing a negative value in will reverse the effect.

Elentari
05-07-2003, 04:03 AM
Yeah, I get that... What's its' use really though when the same thing can be achieved with absolute positioning? (with less trouble in my opinion...but that might be cuz it's only just now been explained to me). And is it used very much? (Do you use it?)

Xiphias
05-07-2003, 11:27 AM
I myself was about to start a thread on this, when I came acrosst Elentari's post. So the relative is really like a coordinate grid with the four quadrants?

pb&j
05-07-2003, 01:19 PM
relative positioning could probably be useful in places such as a navigation. say you want a block of navigation open up a bit to the right and down when you hover over the first part of navigation (submenus sortof thing). that is probably relative positioning in action.

comparing absolute to relative might also be considered like... comparing using pixels to percentages for a width in a table. one is fixed, the other may adjust itself according to the persons screen resolution.

i myself use absolute positioning and the float property. i havent had to use relative positioning much to date.

starlet
05-07-2003, 02:46 PM
An example of why its used would be my blog group dateing part...the date and the day/month overlap and i used relative positioning to do it rather than absolute because because obviously they move position as i add new entrys so absolute would be no good to me.

Example of my code:
In the head
<STYLE TYPE="text/css">
<!--

H2.spin {position: relative;
top: 5px;
left: 10px;
font: bold italic 24pt comic sans ms;
color: #F6CEE6}

H3.spin {position: relative;
top: -33px;
font: normal 14pt tahoma;
color: #000000;
margin-left: 20px;
margin-bottom: 0px;}

-->
</STYLE>

in the body where i want them to appear

<h2 class="spin">4th</h2>
<h3 class="spin"> Sunday May 2003</h3>

Sorry im not very good at explaining things :P

Xiphias
05-07-2003, 08:57 PM
... I still don't get it but don't bother trying to get thru to a dumb person like me