scriptygoddessSorry for the placeholder, my plan is to fill in the answers. (If I get the answer wrong, please correct me! As well, feel free to answer any of them in the comments – if you do, I'll move your comment into the body of the post – with credit (and then delete the comment to clean up) (Actually there was an answer by Tom (anonymous) in the comments – I'll leave his there, and try to put it in my own words – maybe then I'll get it! LOL!)
Question
What's the difference between static, relative, absolute, fixed positioning. And what scenario would be a good example for use of each?
static
I'm guessing this is the default. It's "position" is as it is in the html. If it's the first thing in the html, it'll show up at the top. If it's the last thing in the html, it'll show up at the bottom… (barring any other styling of other elements around it)
Uses? got me. Doesn't seem like you WOULD use this specifically.
relative
This block still shows up where it is in the html – but you can modify it's positioning… move it over a little, using top, right, bottom, and left elements.
Those additional elements move it over based on it's "container" – which could be the page itself – or another layer. If that "parent" positioned over to the right of the page 300 pixels. Then you give this relative positioned layer left: 20px…technically it would bee 300 + 20 over from the left of the page. It's position is relative to that container.
absolute
This removes the layer from the rest of the flow of the page and pastes it where you specifically want it to go. It's position is determined with height, width, top, right, bottom, and left elements.
fixed
Would be cool if IE supported it. This fixes an element on the page – much like absolute, but with the addition of it not scrolling. I don't see my using it much un less IE magically learns what it is
Question
what's the difference between inline vs block display (and some of the other options for display)? good examples for use? (I know that display: none hides stuff. That's about it)
block
An example of a well-known "block" element – <p> – there's space before and after it – once you put that </p> – carriage return – block ends.
inline
Doesn't generate a carriage return at the end – (<span> tag is typically displayed inline, same for <b> etc..) If you wanted to really mess with the world you could go and specify p { display: inline; } and then suddenly p tags would cease to have a carriage return. (Note: I'm not recommending you do this. I would imagine reading paragraphs that bleed one into another would be just a TAD difficult to read.
uses: got me!
Question
Float?? What's the best use for this – doesn't this fight against positioning?
(Incidentally – I just tried to find the answers to those questions in this book, and I DO believe my eyes are starting to bleed… The definitions made NO sense. Don't get me wrong – Eric Meyer is great… except for those particular definitions)
what that means, is if there are multiple inline elements, they will be next to each other. Ex: strong and em. Block will return the next element to the next line. block fills up the whole containing element unless you specify a width. Also, you cannot specify a width or height for an inline element (but you can do line-height, I think).
