代码之家 › 专栏 › 技术社区 › Bhojendra Rauniyar

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

firefox css

6

Bhojendra Rauniyar · 技术社区 · 12 年前

我对长方体阴影的行为并不感到惊讶,如果容器相对放置,阴影会移到下面,但如果没有放置(即静态位置),阴影会出现在前面。

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

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

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

enter image description here

demo

有人能告诉我这个变化吗?

3 回复 | 直到 6 年前

1

2

BoltClock 12 年前

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

这里的真正问题(问题中没有提到)是您正在与 display: table-* 元素。众所周知,Firefox在使用 位置:相对 因为在这种情况下没有定义的行为。从 spec :

“position:relative”对表行组、表头组、表尾组、表行、表列组、表列、表单元格和表标题元素的影响未定义。

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

2

1

Anonymous 12 年前

申请 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); */
}

3

0

Jaison James 12 年前

也请尝试以下css规则。

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