Jump to content

relative , absolute ... !!


hassank1

Recommended Posts

Hi

 

I am learning CSS .. I am a bit confused  about the difference between position : 'relative' and 'absolute' .. so would u please give me a clear and simple definition of both of them .. and where it's more appropriate to use one of them or the other .. with some examples please..

 

thanks.

Link to comment
Share on other sites

This is one of the biggest problems for beginners. It's good that you asked. These are two extremely advanced techniques that most professional developers stay away from.

 

position:absolute - this takes the element completely outside of the linear flow of the html. It makes the element "relative" to the browser window and not where it is placed within the html.

 

Example. If I put a block of five paragraphs in a DIV that has the following css:

 

.whereamI {

position:absolute;

top:0;

left:0;

width: 300px;

height:200px;

visibility:visible;

overflow:auto;

background:#fff

}

 

Even if the paragraphs are in the middle of the html, surrounded by other paragraphs, lists, graphics, they will display exactly at the top left area of the browser window and be "on top" of anything in the html that is before it or after it for 300px wide and 200px high.

 

DreamWeaver calls this a "layer", because it layers the block on top of (or behind if you use visibility:hidden) elements before or after.

 

Now, IF the paragraphs are more than 200px high, the window will auto-generate a scrollbar to scroll up and down because we specified that ONLY 200px should be visible at any time.

 

position:relative - This makes the element "relative" to the flow of html before and after. So why would you need to tell an element to be relative to the html? After all, all elements are relative to the html before or after, right?

 

Well, not really. If you create a position:relative block then place a position:absolute block within it, the position:absolute block NOW becomes relative to the position:relative block instead of the browser window. It may still be considered outside the flow of html, but it is contained by the parent block.

 

So, you could create layouts using position:relative blocks to contain position:absolute blocks that were exactly so many px to the top, bottom, right or left of the parent block.

 

But this causes problems if the content of one block exceeds the height of the content of another block because they are told to be exactly Xpx wide, high, from the top or left. For today's layouts using well crafted (and properly cleared) floats are the preferred method.

 

Position layout came in handy back in the old fixed pixel design layout days, where elements were exactly so many pixels wide and high. We all tried to keep our designs to fit within a screen resolution of 800px by 600px (CRT monitors of 14 to 15 inch ) - which meant a design max/min viewable of 775px by 550px.

 

We would designate absolute positioning exactly so many px from the and left, and so many px visible, so people wouldn't have to scroll the entire page to view the content.

 

The layout design remained fixed and the text "content" within it would scroll.

 

 

Link to comment
Share on other sites

thanks ... that's exactly what I wanted to know ..

 

So , now for example I create a main div (container) with position : relative .. then I place divs within it as position : absolute .. right ?

 

one more thing .. you've mentioned something about a height problem !! how can I fix it ? can I make for example one of the height dynamic or flexible or something like that ?

 

thx.

Link to comment
Share on other sites

For the most part, you should stay away from absolute positioning. There are some circumstances in which it can be useful, but as a beginner with CSS, you are not likely to come across them for a bit yet.

 

Absolute positioning seems like it should be a great thing when you are a beginner, and most beginners fall into the trap of trying to use it, but you will find quickly that it just ends up making things worse and harder to deal with.

Link to comment
Share on other sites

First, you can't fix the height issue when using absolute positioning.

If you set the footer to "bottom:0; left:0", when the screen is minimized the footer will still ride up over the content before it because it will ALWAYS be sitting at the bottom left of the window.

The content before it means nothing because it is OUTSIDE the flow of html.

 

Now, about floating.

 

You will need to learn two crucial things:

 

1. What floats are, do and how they behave,

2. How to cross-browser clear floats.

 

A good start for beginners is max design's "floatutorial":

 

Float basics

 

The link takes you to the entire float concepts and process from the most basic information, through to a Liquid three column layout.

 

It behooves you to take the time and run through it all. Floats can be frustrating if you don't understand the concepts.

 

Granted, this is an older tutorial and while it covers all of the concepts well, it doesn't handle float clearing well.

 

And proper clearing is the most important cross-browser technique related to floats.

 

To get started with clearing, copy and paste thfollowing into notepad (or other simple text editor) and save it on your computer as "clearfix.txt" ... it is known as the "clearfix" technique (although it is a modification of the original version):

 

#my-ID:after, .my-Class:after { /* self-clear floats */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
/* hack for IE6 */
* html #my-ID, # html .my-Class {height:1%}
/* hack for IE7 */
* :first-child + html #my-ID, * :first-child + html .my-Class {min-height:1px}

 

Don't panic! This will make sense.

 

Here is the link to the original clearfix method: clearfix (ignore the note at the top dated march 2008 with a link to an "easier" techinque. The other technique has issues and nasty surprises).

 

The difference between the original and the revised method is that the original uses an empty DIV in the markup for each clear.

 

The revised method goes into your css and you just replace #my-ID or .my-Class with the actual IDs and Classes that you want to clear.

 

For example, in a site of mine I have a navbar that I want to clear the floats above and below it, and a class element that contains a floated image within it (which needs to clear top and bottom non-floated elements), they are in the css as:

 

#topNav {float:left;width:100%;background:#000000 url(../images/roundlinksblu.jpg) repeat-x; font-size:.9em }

.newsItem {margin-bottom:0;padding:2px 0px;font-size:.85em; border: 1px solid #666; background-color:#fff;text-align:center }

 

In order to clear them, I simply add their names to the clearfix by tacking on the :after "pseudo" element in the clearfix selects:

#topNav,  .newsItem:after { /* self-clear floats */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
/* hack for IE6 */
* html #topNav, # html , .newsItem {height:1%}
/* hack for IE7 */
* :first-child + html #topNav, * :first-child + html , .newsItem {min-height:1px}

 

The clearfix can contain as many elements as need to be cleared simply by separating them with a comma.

 

A lot to process now. But once you have it down you will be amazed at the layout control power you will wield - you will actually also forget how to use tables for layout.

 

Good luck.

 

 

Link to comment
Share on other sites

Here is the link to the original clearfix method: clearfix (ignore the note at the top dated march 2008 with a link to an "easier" techinque. The other technique has issues and nasty surprises).

 

The difference between the original and the revised method is that the original uses an empty DIV in the markup for each clear.

 

The original clearfix did not use an empty div in the markup. The whole point of the clearfix was that it removed the need to use an empty div and provided increased reliability. The modified version of the clearfix goes even further by removing the need to even use an extra class in the markup. I personally add a few other styles to the clearfix solution to cover a few rendering differences in Opera.

 

I would also strongly recommend that people do not use the IE6 and IE7 "hacks". Put that kind of stuff in conditional stylesheets. The IE7-targeting style isn't even technically required since {min-height:1px;} has no effect whatsoever on other browsers because the height of the element will be greater than 1px anyway. Much like {display:inline;} on a floated element has no effect on anything above IE6 (which is why some people leave it in their master stylesheet). But the concept is that you separate any IE-specific styles from each other and from the styles being served to standards compliant browsers.

 

It is also worth understanding that the self-clearing of floats in IE is achieved by triggering the proprietary IE property of "hasLayout". It is not always the case that you will want to trigger "hasLayout" in IE on the same element that you are self-clearing in modern browsers...and equally, it will be the case that you will need to trigger "hasLayout" on some elements for IE but do nothing to the styles for modern browsers.

Link to comment
Share on other sites

I would also strongly recommend that people do not use the IE6 and IE7 "hacks".

 

BM, this would have been too much information to someone just learning floats and trying to get their heads around the clearfix (yes, my bad. She used a blank div for spacing in her original example ... NOT as a float clear)

 

USE the hacks! Until you can learn conditional comments.

Link to comment
Share on other sites

clearfix? Stop confusing the child. (figure of speech, - I know you are an adult)  ;D

 

Just do this:

 

.left {

width: 150px;

float: left;

}

.right {

width: 150px;

float: right;

}

.clear {

clear: both;

}

 

html:

<div class="left">Left Crap</div>
<div class="right">Right Crap</div>
<div class="clear"></div>

 

I'm not saying to "NOT use the cleafix method" but as a beginner you should start of easy...

Link to comment
Share on other sites

TFG, the whole point is to not litter your markup with empty DIVS. I have css files where there are at least 6 or 7 selects in the clearfix element (including nested floated elements. The last thing I would want to do is place empty divs in the mark up. I have some older websites where I did that and realize now how much MORE work it cost me.

 

I suppose when showing beginners something we can tend to want to show them the quick and easy. But once they start doing the quick and easy and come up against a situation where that no longer applies, they will get frustrated.

 

I'm just as guilty in not wanting to mention IE css management with conditional comments.

 

But the clearfix is a concept to be shown with as little distraction as possible. It doesn't make sense to beginners until they get comfortable using it.

Link to comment
Share on other sites

Adding a ‘overflow:auto’ to the outer DIV does the trick.

 

The overflow:auto technique is cross-browser buggy and has a few different bugs in Safari, Opera and Mozilla. It also produces horizontal scrollbars when content exceeds the dimensions (as in a flexible layout or embedded element like graphics or form elements).

 

It is not good for use in the wire frame page layout. It is supposedly a good technique for individual situations, such as where you have an image floated in a paragraph and followed by a non-floated paragraph or other tag element.

 

However, since I don't use it for the wireframe (and already have a cleafix setup, I just add any other necessary floated element to the clearfix).

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.