CSS Positioning cheet-sheet. You actually need quite a bit of understanding of CSS to find this useful. I recommend David Sawyer McFarland’s book, CSS The Missing Manual.
| position: | what it does | IN FLOW? This block item affects its sibling items that come after it in the flow of HTML. | RESETS FOCAL POINT? This item’s position sets a new start-point for any children of it that are absolutely positioned. |
|---|---|---|---|
| static | Normal top-down flow of html. | YES | NO |
| relative | Acts as if it is in the normal flow, but it can be offset from where it would be. Requires top/left, top/right, bottom/left, or bottom/right to be set. | YES | YES |
| absolute | Removes it from the flow. Browser looks to this item’s first (most recent) ancestor that was positioned (relative, absolute, or fixed) to provide the starting point for this child element to position itiself. Requires top/left, top/right, bottom/left, or bottom/right to be set. | NO | YES |
| fixed | Sits on top of the other content in the window – it it fixed to the window itself so that when the scroll moves so does the content. | NO | YES |
What’s the difference between display and visibility?
| CSS | Can be seen? | In flow of HTML? |
|---|---|---|
| display: block | YES | YES |
| display: none | NO | NO |
| visibility: visible | YES | YES |
| visibility: hidden | NO | YES, and leaves a big hole where it would have been |
Width of an element
| to set by technique | width: | what you are doing |
|---|---|---|
| length | 10px 0.5cm |
Browser try to fit (sometimes sqeuzing) the content within this
to this specified dimensions |
| auto | auto | the browser calculates the width based on how much stuff is inside this tag -- if allowed to expand freely on its own -- would grow to, making it that wide when done. |
| percentage | 90% 70% 50% |
defines width in relation to the containing box |