absolute position according to parent element when parent is not positioned

Question

I know that an element with position: absolute is moved out of the normal flow and positioned to its nearest positioned ancestor, or to the initial containing box.

But in the code below the div of class: face bottom is positioned at the top-left corner of its container box cube, which shouldn't be since neither of its ancestors---the cube and the container---has a position attribute set.

To which positioned element is it absolutely positioned to? Or if it is positioned to the initial containing box (which I think is not the case), what is this initial containing box?

screenshot

<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="container">
                        <div class="cube">
                            <div class="face bottom">6</div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

* {
    box-sizing: border-box;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: 3px solid black;
}

.cube {
  width: 100%;
  height: 100%;
  border:3px dashed red;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
}

th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

BTW, this code comes from an MDN page that demonstrates the building of 3D cubes. I deleted code unrelated to this problem for simplicity.

Very boring answer unfortunately – the `transform-style` rule introduces a new containing block originating at the `.cube` element. [See previous discussion](https://stackoverflow.com/a/39014650/21146235) — motto, Apr 04 '23 at 11:52
both duplicate will explain in detail how position:absolute/fixed get their position — Temani Afif, Apr 04 '23 at 13:03

Peter Herdenborg · Answer 1 · 2023-04-04T11:55:38.763

Since you haven't specified top, left, bottom or right for the innermost div, the browser falls back to placing it as if it had position: static.

This answer confirmed my own belief and links to a standard: https://stackoverflow.com/a/10244977/331397

Edit: As pointed out by motto in a comment, in this case the .cube parent actually does introduce a new containing block. If I'm correct though, even without that fact you would see the same positioning unless you actually specify a position for .face.

absolute position according to parent element when parent is not positioned

1 Answers1