Hi, I was wondering what position:relative; actually does to an element. Does it change anything at all if no top bottom left right declerations are made? You see I want something inside a DIV that is always 30px from the right of that DIV, so I have given the something position:absolute with the container position:relative; I just wanted to check that position:relative; isn't going to mess things up.
It all depends if you add it to anything I will give you an example: <div class="bannerLeft"></div> <style> .bannerLeft { background: url(image here); height: ##px; position: relative; top: ##; <-- Change this to were you want it to go. left: ##; <-- Change this to were you want it to go. } </style> Its useful for something but can cause alot of screen resolution errors. Hope this helped!
Hey thanks I was wondering what about if we don't specify any top left right or bottom along with it, but adding it for other reasons (e.g to position child elements as desc. in 1st post, or to debug IE from layout probs I see sometimes). Will it change anything? I guess all i'm doing is changing it from the default which is position: static; I think, so is there any differences between the two?
I personaly have never used position: static; in coding. I find coding everything from your DIV tag much easier <div style="background: url(image here) .... rest of the crap here> CONTENT? </div>
Yep I think position:static; is by default so you would never need to use it unless you have set other defaults!! I just don't know why I often see position:relative or sometimes overflow:hidden; or overflow:auto; added to layouts (usually parent/wrapper DIVs), i've always wondered but never really looked into it. I guess it's there to debug some problemos
YES there is a change when you make something position: relative. Think of floating on the surface of the ocean, looking at concrete blocks laying on the ocean floor (yeah, pretend you can see the ocean floor lawlz). On top of each block is a thin metal plate. It's sitting right on top of the concrete so actually the plate is all you can see. It's attached with a short chain though. That's a static div. When you say "position: relative" the plate lifts off-- only a few centimeters, because of the chain, but it's above the block. From the surface it still LOOKS the same (in reality, there's no plate but setting a position "generates" a new box (which the plate represents), which contains all the visual stuff from the original box). So, it looks the same, what changed? Mostly just the natural z-index. That's why, when you DO add coords like top and left, what you're doing is sliding the plate around (and it's a few cm higher than all the other blocks, so it sits over them). Or, in CSS, the generated box gets moved around. That's why there's a "space left over". It's not a space, it's the original BOX still there. It does not move. Relatively positioned boxes not only start a new stacking order for it's children (as far as z-index and all), but can be a reference position-wise for absolutely-positioned children (you already know this). Position: relative doesn't trigger haslayout but for some reason it does calm IE down sometimes. It seems to reduce some bugs. So you might see it placed seemingly randomly just for IE. Overflow: auto lets you set a height or a width (or both) to a box, and instead of letting the content inside overflow (if it's wider or taller than its container), it'll generate scrollbars instead. Which, sometimes you want scrollbars instead of letting content hang out like teenagers with their saggy pants. Overflow: hidden will hide that overflowing content, permanently. So usually that's not what you're trying to do (depends). It'll let a box enclose floated children for example (instead of adding an ugly clearing div in the markup). That might be the most popular reason for oveflow: hidden. Changing the overflow to anything other than the default will make that box enclose its floated children.