Absolute Positioning (like relative positioning) is made up of three parts. First, the "position" - this is simply set by "position: absolute;"
To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".
By setting something's position to "absolute", you've told it you want to position it "relative" to it's first positioned parent or ancestor (No, it's not a typo). With RELATIVE positioning,
you position something "relative" to itself - with ABSOLUTE positioning, you position it relative to it's parent (specifically, it's first parent or ancestor that has a position set - relative or absolute).
I'm sure that makes no sense - so lets try it out to make it more clear.
In the picture to the left, we've created a document with an image, and some text. The image has "position:absolute;", and has "top:0px;" and "right:0px;".
The body is the images parent, and is the highest it will go to look for a positioned ancestor, so the image is positioned based on the <body> tag - 0px from the top, and
0px from the left.
Part 1 (the setup):
- Create a <div> with id="container" (don't forget to add a close </div> as well
- Set it's height and width with CSS to 960px wide and 600px tall
- Set it's background-color to #CCC
- Center it using margins: margin: 50px auto; /* This will move it 50px from the top, and set it's left and right margins to "auto", which will center the div */
- Create another div inside of the "container", and give it an id of "box"
- Now, set the position of the "box" to absolute
- And set it to bottom:10px; and right:10px; - Refresh the page - What happened, and why?
- Now set the "container" to position:relative; - What will this do to the container (hint: if anything)
- Refresh the page - What happened, and why?
[BACK to RESOURCES]