This trick will help you place element inside its cointainer using absolute positioning. Very often you want to be very precise when placing elements. It is very hard/impossible when you anchor to entire window because browser resizing is messing everything up. To avoid this, simply set relative positioning to the wrapper element. Check demo.
Image below shows what you can accomplish using this technique:
It’s not a trick but a basic css behavior
You also don’t need to specify div before the ID selector in css file as there can be only one ID in the document and ID is the strongest selector so it cannot be overridden without using ID again or !important in the css file.
You also should not specify units if it’s the value equals 0, it’s redundant.
You should also you lowercase names
Hi nightmare,
You have absolute right about CSS optimizations. Of course I use them on daily basis. This code was written in 5 mintues for educational purposes only but I will update it. I’m not sure about “It’s not a trick but a basic css behavior” because I’ve seen it on a css tricks website for a first time. Is there any W3C documentation about that?
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
tl;rd: “positioin: absolute – The element is positioned relative to its first positioned (not static) ancestor element”
cheers
Thanks!