![swiss army knife](https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/03\/swissarmy2-400.jpg "\\"'Swiss")
<\/p>\n<\/p>\n
At some point or another, if you want to lay out a complex CSS design, you\u2019re probably going to have to turn to the veritable Swiss Army knife of advanced CSS layout: the position property. There are four possible values for this property: static, relative, absolute, and fixed. Let\u2019s briefly go through each.<\/p>\n
The static position value<\/strong> is sort of like the giant oversized flathead screwdriver in the Swiss Army knife: initially, it really doesn\u2019t look like it does much at all. That\u2019s because all objects are \u201cstatic\u201d positioned by default. Therefore, if you whip out a \u201cstatic\u201d position on an object that doesn\u2019t have anything else applied, you can expect it to do\u2026 absolutely nothing. However, it can be useful if, for example, you\u2019ve set a \u201crelative\u201d position on every image in your website, and then you need on specific image to behave normally. That\u2019s when you suddenly realize that the giant flathead screwdriver is exactly<\/em> the right size for replacing the screws on the bathroom vent cover. It has finally earned its keep.<\/p>\n Relative positioning<\/strong> in CSS is a bit like the pair of scissors in a Swiss Army knife: it has a pretty obvious function, but it doesn\u2019t always work as well as you\u2019d expect (or at least, it doesn\u2019t the same way<\/em> as you\u2019d expect). Using the relative position value, in conjunction with the top, bottom, left, or right properties to move the object, moves an object from its initial location in the document flow to a new one. However, the old space where the object used to live is left open. Therefore, if you have three paragraphs, and position the third paragraph like so:<\/p>\n Then you\u2019d end up with a document that looked something like this<\/a> (I\u2019ve added some styling to the paragraphs to make the positioning easier to see). As you can see, the paragraph as moved down and left (or more accurately, away from the top and right) from where it was originally, but the space reserved for the paragraph has remained intact. This can be useful, as long as you understand what you\u2019re getting when you relatively position. It\u2019s like understanding that the scissors in your knife are okay at cutting fabric in an emergency, but they\u2019re never going to replace your kitchen shears.<\/p>\n Absolute positioning<\/strong> is the knife of the Swiss Army knife: it\u2019s what everyone generally thinks of (and expects) when they think of positioning elements. Absolute positioning an element pulls it completely out of the document\u2019s flow \u2013 the space it would have otherwise occupied is closed up, and the element is placed wherever you\u2019d like it to be placed (according to the top\/right\/bottom\/left properties). So this little bit of code:<\/p>\n Will result in something like this.<\/a> Note a few things about this example: first, since we set the \u201cbottom\u201d property the element is positioned according to the bottom of the browser window (and And last but certainly not least is the fixed position property<\/strong>. It\u2019s a little like that slightly sharp, oddly curved piece of metal in your Swiss Army knife \u2013 you\u2019re not quite sure what to do with it at first, but once you realize it\u2019s perfect for popping the top off a beer bottle, it quickly becomes your favorite tool in the arsenal. Fixed positioning behaves a little like absolute: it pulls the element out of the document flow and closes the original space behind it. However, unlike absolute positioning, once you\u2019ve specified a spot for the element, it stays there… even if the page behind it moves. So take this code:<\/p>\n That will produce a document that behaves like this.<\/a> No matter how much you scroll, that paragraph will stay in the exact same spot. This can be really useful if you need something to always stay in one spot, like an important navigation bar at the top of the page, or footer information that you always want to be visible at the bottom of the window.<\/p>\n Once you learn to master these properties, advanced CSS layouts start to become a whole heck of a lot less mysterious. If you\u2019d like to learn more, be sure to subscribe to the CSSnewbie RSS feed<\/a>, because later this week I\u2019ll be talking more about how to use these properties in useful and interesting ways.<\/p>\np#two {\n\tposition: relative;\n\ttop: 2em;\n\tright: 3em; }<\/pre>\np#two {\n\tposition: absolute;\n\tbottom: 2px; }<\/pre>\np#two {\n\tposition: fixed;\n\ttop: 10em;\n\twidth: 35em; \n\tbackground-color: #fcc; }<\/pre>\n