CSS Positining - Absolute and relative Confusion

Hi,

I am expert in table base website but since many day, i start to work on CSS, i read many tutorial related positioning but still i have confusion n both value Absolute and relative, if anybody can understand by example let me know

 

Absolute positioning removes an element from flow - so basically it doesn't exist for determining the positioning of other things on the page. Then, when you set 'top','left','right' or 'bottom' it treats the corners as that of 'body', or of the nearest parent element that has positioning (relative or absolute) on it.

One of the best examples of this is doing gilder-levin style image replacement

<h1>Some Text<span></span></h1>

h1 {
	position:relative; /* absolutes inside this treat 0:0 as off the h1 */
	padding:4px 8px;
	font:bold 20px/24px arial,helvetica,sans-serif;
}

h1 span {
	position:absolute;
	top:0;
	left:0;
	width:512px;
	height:32px; /* 4px padding + 24px line-height */
	background:url(images/h1Logo.png) 0 0 no-repeat;
}

Code (markup):

The span is moved to the upper left corner of the h1, and is rendered OVER the text.

Because absolute positioning removes items from flow, it should be restricted in use to positioning fixed sized elements inside an element that is in flow - with the possible exception of things like menus (which technically are based off a flow element, the one you hover to make it appear).

It should NOT be used for making things like columns since that is quite often prone to breakage. People who learned to draw goofy pictures in photoshop first often have difficulty grasping the idea of 'flow elements' much less having dynamic fonts and containers - and so they try to use absolute positioning for EVERYTHING then come here going "Why is my page broken in ____" - when the answer is "You used absolute positioning on EVERYTHING, it's a miracle you have scrollbars!"

Position:relative is much more complex and completely misunderstood by most. The first thing it does we use in the above example, it makes it so absolute positioned elements inside it treat 0:0 in each corner as based on the relative tag and not BODY.

The second thing it does is if you set top/left/right/bottom, it moves where the element is DRAWN but NOT where it is handled for flow. Other tags around it will pretend that it's still in it's original position. Because of this and other behaviors I like to think of the box-model actually being built from two boxes... Flow and Render. The 'flow box' is where the element exists in document flow - how other tags treat it for size and position - while the 'render box' is where the element is actually drawn. If you look at it this way certain things like negative margins start to make sense, since they actually change the size of the flow box without changing the size it's going to be drawn. Relative positioning moves the render box without effecting the flow box - etc, etc...

It's a bit more complex on the surface than tables, but in practice it's simpler and a hell of a lot less code; and even when it is more code that excess lands in the CSS, so at least if you use the same elements across pages you exploit caching to use less bandwidth.

 

I just recently watched this video, and it cleared a bunch of things up for me (beginner here as well). It's long, so there will be parts that you probably already know, but it was still worth it for me to watch the whole thing. You can skip the first part where its just music and introduction, though.

http://video.google.com/videoplay?docid=-7403771606765531020&hl=en&emb=1#

 

Thank you i get my answer

thanks

 

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element.

 

Christ haven't they banned you yet with your completely off-topic random posts that seem to have nothing to do with what's being discussed in ANY thread?

I know I've hit report like three times.

 

LOL --- that's funny...thanks for the laugh! I was wondering the same thing in the previous post.

 

Check out that spambots other posts - if that's an actual legitimate poster I'm the Queen of Sheeba. I smell spamming to get to the point links are allowed in signatures.