| when you're going to use CSS positioning, the first | | | | same is true for the other three. |
| thing you need to do is use the CSS property | | | | Relative Positioning |
| position to tell the browser if you're going to use | | | | Relative positioning uses the same four positioning |
| absolute or relative positioning. | | | | properties as absolute positioning. But instead of |
| What most people don't realize when they're using | | | | basing the position of the element upon the browser |
| CSS to lay out Web pages is that there are actually | | | | view port, it starts from where the element would |
| four states to the position property: | | | | be if it were still in the normal flow. |
| - static | | | | For example, if you have three paragraphs on your |
| - absolute | | | | Web page, and the third has a position: relative style |
| - relative | | | | placed on it, it's position will be offset based on it's |
| - fixed | | | | current location - not from the original sides of the |
| Static is the default position for any element on a | | | | view port. |
| Web page. If you don't define the position, it will be | | | | Paragraph 1. |
| static and will display on the screen based on where | | | | Paragraph 2. |
| it is in the HTML document and how it would display | | | | Paragraph 3. |
| inside the normal flow of the document. | | | | In the above example, the third paragraph will be |
| If you apply positioning rules like top or left to an | | | | positioned 3em from the left side of the container |
| element that has a static position, those rules will be | | | | element, but will still be below the first two |
| ignored. | | | | paragraphs. It would remain in the normal flow of the |
| Absolute CSS Positioning | | | | document, and just be offset slightly. If you changed |
| Absolute positioning is the easiest to understand. You | | | | it to position: absolute; anything following it would |
| start with the CSS position property:position: | | | | display on top of it, because it would no longer be in |
| absolute; | | | | the normal flow of the document. |
| This tells the browser that whatever is going to be | | | | What About Fixed Positioning? |
| positioned should be removed from the normal flow | | | | Fixed positioning is a lot like absolute positioning. The |
| of the document and will be placed in an exact | | | | position of the element is calculated in the same way |
| location on the page. It is also taken out of the | | | | as the absolute model - from the sides of the view |
| normal flow of the document - it won't affect how | | | | port. But fixed elements are then fixed in that |
| the elements before it or after it in the HTML are | | | | location, like a watermark. Everything else on the |
| positioned on the Web page. | | | | page will then scroll past that element.position: fixed; |
| If you want to position an element 10ems from the | | | | Keep in mind, when you fix an element in place on |
| top of the document window, you would use the | | | | your site, it will print in that location when your Web |
| "top" offset to position it there with absolute | | | | page is printed out. For example, if your element is |
| positioning:position: absolute;top: 10em; | | | | fixed at the top of your page, it will appear at the |
| This element will then always display 10em from the | | | | top of every printed page - because it's fixed to the |
| top of the page - no matter what else displays there | | | | top of the page. You can use media types to change |
| in normal flow. | | | | how the printed pages display fixed elements: |
| The four positioning properties are: | | | | @media screen {h1#first { position: fixed; } |
| - top | | | | } |
| - right | | | | @media print {h1#first { position: static; } |
| - bottom | | | | } |
| - left | | | | <!--/gc--> |
| To use them, you need to think of them as offset | | | | [removed]// <![CDATA[ zSbL=3;zSB(2);zSbL=0 // |
| properties. In other words, an element positioned | | | | ]]>[removed] [removed]// <![CDATA[ |
| right 2em is not moved right 2em. It's right side is | | | | if(zp[7].d){Dsp(zp[7],'ip')} // ]]>[removed] |
| offset from the right side of the window 2em. The | | | | [removed]// <![CDATA[ if(zp[11]. |