此问题已在此处有答案：
Why aren't my absolutely/fixed-positioned elements located where I expect?（3个答案）
Why does applying a CSS-Filter on the parent break the child positioning?（4个答案）
3天前关闭。
我知道一个position: absolute的元素被移出了正常的流，并被定位到它最近的定位祖先，或者到初始的包含框。
但是在下面的代码中div类：face bottom位于它的容器盒cube的左上角，这不应该是因为它的祖先cube和container都没有position属性集。
或者如果它被定位到初始的包含框（我认为不是这样），那么这个初始的包含框是什么？
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;
}顺便说一句，这段代码来自一个演示3D立方体构建的MDN页面。为了简单起见，我删除了与此问题无关的代码。
1条答案
按热度按时间ycl3bljg1#
由于您没有为最内层的div指定
top、left、bottom或right，因此浏览器福尔斯到将其放置为position: static。这个答案证实了我自己的信念和链接到一个标准：https://stackoverflow.com/a/10244977/331397
编辑：正如在评论中的座右铭所指出的，在这种情况下，
.cube父代码实际上引入了一个新的包含块，如果我是正确的，即使没有这个事实，你也会看到相同的位置，除非你实际上为.face指定了一个位置。