Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Why does this positioning work the way it does

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #190646
    inktrap
    Participant

    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?

    #190659
    Paulie_D
    Member
    #190677
    shaneisme
    Participant

    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.

    #190691
    inktrap
    Participant

    @ 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.

    #190696
    shaneisme
    Participant

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

    #190697
    GSutherland
    Participant

    darnit, now i have to go watch russian dashcam videos

    #190703
    inktrap
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Other’ is closed to new topics and replies.