父元素未定位时根据父元素的绝对位置

Question

我知道带有

position: absolute

的元素被移出正常流并定位到其最近的定位祖先，或初始包含框。

但是在类的

div

下面的代码中：

face bottom

位于其容器盒

cube

的左上角，这不应该是因为它的祖先都不是——

cube

和

container

---有一个

position

属性集。

绝对定位到哪个定位元素？或者如果它定位到初始包含框（我认为不是这样），这个初始包含框是什么？

<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;
}

顺便说一句，此代码来自一个 MDN 页面，该页面演示了 3D 立方体的构建。为了简单起见，我删除了与这个问题无关的代码。

Answer 1

由于您没有为最里面的 div 指定

top

、

left

、

bottom

或

right

，因此浏览器会退回到放置它，就好像它有

position: static

一样。

这个答案证实了我自己的信念并链接到一个标准：https://stackoverflow.com/a/10244977/331397

编辑：正如评论中的座右铭所指出的，在这种情况下，

.cube

父级实际上确实引入了一个新的包含块。如果我是正确的，即使没有这个事实，你也会看到相同的定位，除非你实际为

.face

.

指定一个位置

父元素未定位时根据父元素的绝对位置

问题描述投票：0回答：1

1个回答

最新问题

父元素未定位时根据父元素的绝对位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1