![racehorse in mid-run](https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/03\/racehorse-400.jpg "\\"'Churchill")
<\/p>\n<\/p>\n
Earlier this week, I explained the basics of CSS positioning<\/a>: what it is and what your options are. Now I\u2019d like to take some time and explain a couple of tricks for using positioning in the real world\u2026 stuff that really harnesses the true power of CSS positioning.<\/p>\n One of the coolest and simplest ways to harness the power of positioning is to use a combination of relative and absolute positioning. Specifically, to absolute position an object inside<\/em> of a relatively positioned object. Why is this so cool? Because of one of the under-understood rules of positioning.<\/p>\n Any time an element is absolutely positioned, it\u2019s actually being positioned according to the boundaries of its containing block. By default, with no other objects positioned on the page, the containing block is the <body> tag. However, if you position any element further down in the hierarchy (like a containing div, for example), that positioned element becomes your new<\/strong> containing block. What\u2019s that mean in practice? It means you can have some XTHML that looks like this:<\/p>\n Then, you can size and relatively position your wrapper div, like so:<\/p>\n Here, all we\u2019re doing is giving it a width, centering it with an auto margin trick, and then setting a relative position. But we\u2019re not actually moving the div anywhere! Setting a relative position, but then not setting a top, bottom, left or right property means the element doesn\u2019t move anywhere. But, because it has<\/em> a \u201cposition\u201d set, it becomes our new containing block. Now, we can specify styles on our sidebar that look something like this:<\/p>\n As we learned last week, setting our top and right properties to zero, with an absolute position, should move our sidebar to the top-right of the page. However, because our wrapper div became our new containing block through use of the relative position, the sidebar is actually just moved to the top-right corner of the wrapper<\/em> div. This can be extremely useful when you have a fixed-width and centered web page: you may want to absolutely position elements according to your \u201cpage,\u201d but not<\/strong> according to the browser window. This is how that\u2019s done. You can see a slightly more involved example here.<\/a><\/p>\n If you have a website that tends to be a bit on the wordy\/lengthy side (like, erm\u2026 this one?), it could be useful to ensure that the site’s navigation is always at the top of the page, no matter how far down your users scroll. For that, fixed positioning can really come in handy.<\/p>\n For this trick, all you need to do is develop a navigation bar of some sort (covered in more detail here<\/a>), and then \u201cfix\u201d it to the top of your website. You\u2019d start out with some XHTML like this:<\/p>\n Next, you\u2019d want to pull your \u201cfix\u201d your navbar to the top of the page:<\/p>\n And really, that\u2019s the meat of your code. The fixed position tells the browser to pull the navbar out of the normal document flow, and then affix it to the top of the page. Of course, because it has been taken out of your document flow, the navbar might be overlapping your text, which will move up the page to fill the space that the navbar has vacated. To ensure that doesn\u2019t happen, you\u2019d want to add some space to the top of your website. Something like this would do the trick:<\/p>\n As the comment above states, you\u2019ll want to add enough padding to compensate for the height of your navbar, as well as any extra spacing you want between your navbar and the content below. So if your navbar were 30 pixels tall, and you wanted 20 pixels of space before you got to your header, you\u2019d want 30 + 20 = 50 pixels of space at the top.<\/p>\n And voila! You now have a navigation bar perma-fixed to the top of your browser window. No matter how far down your page your users scroll, your navigation will never be more than a few pixels away. You can see it in action here.<\/a><\/p>\n These are just two ways in which the position property can really make your life easier, your websites cooler, and your wife more satisfied. Stay tuned<\/a>, because next week I\u2019ll show you a couple of other neat positioning tricks: one for creating big visual impact with absolute positioning, and another for making subtle (but useful!) text changes using relative positioning.<\/p>\nAbsolute Positioning Inside Relative Positioning<\/h3>\n
<div id=\"wrap\">\n\t<p>This stuff is in the wrapper<\/p>\n\t<div id=\"sidebar\">\n\t\t<p>Sidebar information is cool<\/p>\n\t<\/div>\n<\/div><\/pre>\n
#wrap {\n\twidth: 500px;\n\tmargin: 0 auto;\n\tposition: relative;\n}<\/pre>\n#sidebar {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}<\/pre>\nFixed-Position Navigation<\/h3>\n
<div id=\"wrap\">\n\t<ul id=\"nav\">\n\t\t<li>Home<\/li>\n\t\t<li>Contact<\/>\n\t\t<li>Etc<\/li>\n\t<\/ul>\n\t<h1>Page Title<\/h1>\n\t<p>This page is cooler than it looks.<\/p>\n<\/div><\/pre>\n
#nav {\n\tposition: fixed;\n\ttop: 0;\n}<\/pre>\n#wrap {\n\t\/* Your padding should be the height\n\tof your navigation bar, plus the \n\tspace you want between the navbar\n\tand the top of your page. *\/\n\tpadding-top: 50px;\n}<\/pre>\n