Why does this positioning work the way it does

[inktrap]

Hi.
Could someone explain this to me?
When I’m setting up superiors and inferiors…

…if I first set “sup, sub” to “position: relative” and “vertical-align: baseline”…

…then set proper position for “sup” with “top:” and “sub” with “bottom:”…

…then set positions for fractions specifically with “sup.frac” (“top:”) and “sub.frac” (“bottom:”)…

why will the “top:” and “bottom:” positions for fractions be calculated from baseline that was set up in “sup, sub” instead of the previous “top:” and “bottom:” declared in regular “sup” and “sub”?

(Not that I’m complaining; it’s very handy that it works this way.)

http://codepen.io/anon/pen/RNaoKB?editors=110

On a related note, is it a good idea from a semantic standpoint to use “sup.frac” for fractions, or should I use spans?

[Paulie_D]

You know there are characters for some fractions?

http://demosthenes.info/blog/566/Writing-Fractions-On-Web-Pages-Correctly-With-Entities

[shaneisme]

Your question (I think) is about how CSS works, not how positioning works.

The Cascade will follow importance, specificity and source order. So if you’re not being more specific with your selectors, or you’re not labeling things as important, if it’s further down the source it will overwrite stuff up above.

Of course in this case, you’re doing both, you’re being more specific by using a class and making it further down the source. If you use a code inspector, you’ll see that the CSS that was declared for just sup is being overwritten by sup.frac. In fact, the bottom: inherit on sub.frac is actually unnecessary.

[inktrap]

@ Paulie_D:
Yes, I know (although most fonts only have ½ ¼ ¾). I’m doing this for arbitrary fractions.

@ shaneisme:
I understand specificity; what I don’t understand is why the top: and bottom: in sup.frac are calculated from the previously set “baseline” in sup, sub instead of the top: & bottom: positions set in sup + sub: that come after sup, sub and before sup.frac + sub.frac. In other words, after inheriting top: & bottom: from a previous rule why aren’t those positions the new starting point for another top: & bottom: in a later rule.

[shaneisme]

I’m afraid you’ve confused me. I’m going to go watch Russian dashcam videos now.

[GSutherland]

darnit, now i have to go watch russian dashcam videos

[inktrap]

Ok, I’ll try again.
Why don’t top: & bottom: positions compound with any previous ones declared for the same element?

[Author]

Posts