Beginners of Cascading Stylsheets (CSS) might not know this trick that I’m about to share. The day you find out about ‘position: absolute’ is the day you will feel like you know CSS like the back of your hands. But have you ever used this property and found out that the div box is not behaving as it should, e.g. the div’s absolute position is relative to the browser’s page and not the website’s container?
Example:
Box Position Relative To Browser Canvas
If that’s not the desired result, and you’re trying to obtain a result whereby the box is inside the container or inside another div (and the position is relative to that box), e.g.:
Box Position Relative To Selected Div (e.g. Container)
Then the solution is to add:
position: relative;
To the parent div, in this case the #container.
So if the absolute is inside the relative, then you will be able to have full control of the absolute – relative to its parent div.
Related posts:
WYSIWYG! I'm a simple person trying to live the simplest life possible - it seems to be the most difficult thing to achieve! I'm an internet enthusiast and I've been a webmaster since early 2007. I like: blogging, developing sites using open source software, social media, computer games, '80s music, comedy & horror, animals, crunching on M&Ms peanut and Smarties!
