Hi, I am a learner of CSS. I would like to ask this part of the code Why does the author uses the display: block and the position: relative together? I thought the display block already form a block and position: relative also forms a block, then there will be 2 blocks. Is it necessary to have 2 blocks here in this case? The page is about forming drop shadow where i got the above code from: http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html Thanks in advance for any help rendered.
Neither position: relative nor position: fixed force an inline to a block. Position: absolute and Float do. So, when you set position: relative on an inline, you make that Inline Box generate a new visual box, which if you then have left or top or whatever coordinates, gets shifted from the position of the actual (inline) box. Position: relative can also make a containing box for absolutely positioned children, and so likely what you are seeing on that page (I didn't look) is someone taking an inline, making it a block and giving it a position, and now any children of that inline can be absolutely positioned relative to the inline instead of the body. You can check this with a test page. Set the background of the body black. Make an anchor, which is naturally inline: <a class="test" href="#">test link</a> With CSS, make it so that you can see the anchor and the inline box it's in: a.test { color: #f00; background-color: #fff; width: 340px; } We've added a width, which will tell us when the inline become a block. Inlines cannot be given a set width, but blocks can be. If you add position: relative to this anchor, you'll see no change in width. If you change that to position: absolute, the width will grow to 340px. If you change that to position: fixed, the width will collapse and you'll see an inline again. If you float it, you'll see the 340px width. As a note, when you make something a block with floats or absolute positioning, you don't ever get margin collapse : ) http://www.w3.org/TR/CSS21/visuren.html This page doesn't actually say this, but it does have some interesting information about inlines. Too bad it doesn't specify when positioning changes inlines to blocks : ( Also, it still says "a space is left behind" with relative positioning. That "space" is actually your original box. The box you move with coordinates is actually the generated box, which we can see.
Thanks for your input. what about display : block? Why it is use together with position: relative. I do not understand this.
Dunno. Sometimes, as I said, someone needs something to behave like a block AND be positioned. As I said, this could be so that a child can be absolutely positioned in reference to the relative parent. Or, making something "positioned" raises that box's natural z-index. Otherwise, I wouldn't know. It's very likely that the two are sitting in the code and the position: relative is doing absolutely nothing and needs to come out.
Which is pretty much it - though without knowing what that class is being assigned to for a tag, what it contains for other tags/content, what tags are around it, and in general the full code of the page it is in just that bit of CSS is effectively gibberish even for the most advanced of us. We'd really have to see more of the code to figure out what's going on... Though given how cryptic that classname is likely the code itself is rubbish.