Categories
Programming

CSS Positioning

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

Leave a Reply

OR LOG IN WITH




Your email address will not be published. Required fields are marked *