使用位置相对时框阴影的差异

Question

我对盒子阴影的行为感到有些惊讶，如果容器相对定位，阴影会向下移动，但如果它没有定位（即静态位置），阴影就会出现在前面。 / p>

#main{
  position: relative; /*sets shadow to below the heading*/
}

取消设置相对位置会将阴影设置为标题的前面：

#main{
  /*position: relative; */
}

demo

有谁可以告诉我这个变化？

Answer 1

在正常情况下，

position: relative不会产生影响，因为带阴影的元素无论如何都会出现在源代码中。

问题中没有提到的真正的问题是你正在使用display: table-*元素。在内部表格框中使用position: relative时，Firefox的行为与其他浏览器的行为不同，因为在这种情况下没有定义的行为。来自spec：

  

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

如果您的布局依赖于堆叠上下文工作，例如当您使用框阴影时，我建议不要使用display: table。

Answer 2

将transform: translate3d(0, 0, 0);或translate(0, 0);应用于#main > div - DEMO

或 -moz-transform: translate(0, 0);仅定位到Firefox浏览器 - DEMO

<强> CSS：

#main {
    display: table-row;
    background: gray;
    position: relative;
}
#main > div {
    display: table-cell;
    width: 500px;
    height: 300px;
    transform: translate3d(0, 0, 0); /* or transform: translate(0, 0); */
}

Answer 3

请尝试以下css规则。

#main > div {
display: table-cell;
height: 300px;
position: relative;
width: 500px;}