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

Question

我对 box-shadow 的行为并不感到惊讶，如果容器相对定位，阴影会向下移动，但如果它没有定位（即静态位置），阴影就会出现在前面。

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

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

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

演示

谁能告诉我这个变化？

Answer 1

position: relative在正常情况下不应该产生影响，因为带有阴影的元素无论如何都会出现在源中。

这里真正的问题（问题中没有提到）是您正在使用元素的事实display: table-*。已知 Firefoxposition: relative在内部表格框上使用时的行为与其他浏览器不同，因为在这种情况下没有定义的行为。从规格来看：

“position:relative”对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。

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