Some obscure details of CSS

I've been using CSS for almost six years. During this period, sometimes I wondered about some obscure details of CSS specifications. These details are listed below.

  1. Layering and stacking order

    When elements are absolutely positioned, it's crucial to determine how they should be overlapped. The problem is that most browsers don't agree on how this stacking order should be displayed. For example, consider the following:

    #container {
      position: relative;
    }
    
    #child {
      position: absolute;
      z-index: -1;
    }
    

    In this case, this element should not be displayed, since we gave to it a negative z-index. Unfortunately, some browsers don't consider 0 as the starting value for the stacking order, so this rule won't work in some cases.

  2. Clearing and containing floats

    As developers, we all know a series of techniques for clearing and containing floats, which includes:

    • overflow:auto/hidden
    • position: absolute

    I mentioned only those that keep me wondering about how they actually work. We all know that floats make vertical space collapse. However, when the former declaration is applied to a parent element, browsers automatically expand the available vertical space to include floats, even when those floats have no stated height. So we should assume that browsers automatically calculate the height of these elements and react accordingly.

    Instead, the latter declaration is even more complicated. We just assume that the vertical space is calculated again according to the actual height of floats, but I don't think this is a sufficient explanation. CSS specifications don't say much about this issue. More precisely, they don't say much about the general problem of clearing and containing floats.

  3. Negative margins

    The question is: "How negative margins affect the computation of the overall dimensions of a containing block?" By subtracting a given length, both horizontal and vertical, what is the computed value of the width and height of a containing block? This should be further investigated.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “Some obscure details of CSS”

  1. For #1, what browsers did you have problems with? I'm testing against FF 3.6, current Chrome, IE8, and latest Opera, and they all correctly place the abspos underneath the relpos parent.

    (Note: 0 is *not* the initial value of z-index; 'auto' is. This acts like 0 for purposes of determining stacking, but does't establish a stacking context like actually saying "z-index:0" would.)

    #2, check out Block Formatting Contexts. It's a bit complex, but that concept is why floats and abspos contain their floats rather than letting them spill out. I believe it's well specified.

    #3, I dunno. I don't use negative margins very much. What properties specifically are you asking about? scrollHeight, offsetHeight, or something else?

Leave a Reply

Note: Only a member of this blog may post a comment.