1

I am trying to determine the set of visible html elements depending on their position and display attributes. My understanding of the browser stacking model largely stems from this page. I have the following small web page:

<html>
<head>
</head>
<body>
  <div style="position:absolute;top:100px; left:25px; width: 200; height: 200; background-color:#FFDDDD;">
      <a href="lala">Text 2</a>
  </div>
</body>
</html>

In this example. the div is positioned and has a z-index of auto. According to the browser stacking model as described on the page mentioned above, the div should go on the layer for positioned elements with z-index auto and hence should be rendered after the anchor (which is a simple inline element). It makes perfect sense that the anchor is not hidden. However, I don't understand the rule. Could anyone explain to me what I'm getting wrong here? Is the description on the page above flawed?

1 Answer 1

1

The spec has a detailed and verbose section describing stacking contexts. The description is all technical prose and non-visual, but the following portions are relevant to your case:

auto
The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

This is the default. The stack level of both your div and a elements is therefore 0.

Within each stacking context, positioned elements with stack level 0, non-positioned floats, inline blocks, and inline tables, are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

Note the portion that says "as if those elements themselves generated new stacking contexts". This means that when painting descendants of the div element — that is, the a element — the whole stacking process is repeated with the div as the root.

The a element in your case is a descendant of the positioned div element, and therefore appears on top of it despite participating in the same stacking context.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.