Html 为什么长方体阴影被另一个div隐藏？

我试图在另一个div上添加一个长方体阴影，但它被剪裁了。为什么以及如何修复它

HTML:

JSFiddle：

结果应该在下一个div的顶部有阴影

---

（我正在Windows 7上运行Chrome 28）

尝试添加

位置：相对

到

#框

DOMs的顺序自然在框上方有#横幅，因此您可以添加：

position: relative;
z-index: 1;

---

到#box，它将作为：

我希望我正确理解了你的问题

你需要有

position:relative;

为了

z-index:1;

正常工作

我也改变了主意

box-shadow: 8px 32px 3px rgba(30, 76, 80, 1) , 
            0px -2px 3px rgba(240, 21, 21, 1), 
            2px 0px 3px rgba(38, 238, 0, 1),
            -2px 0px 3px rgba(158, 29, 243, 1);

---

为了让阴影落在另一个div上

不，在你的小提琴上我仍然看到橙色在顶部。

80px 70px 3px rgba（30,76,80,1）

那太大了，怎么太小了？我明白了，我把第二个参数误认为是大小而不是偏移量。

*{
    padding:0px;
    margin:0px;
    }
    #box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
                position:relative;
                z-index:100;
}`enter code here`

box-shadow: 8px 32px 3px rgba(30, 76, 80, 1) , 
            0px -2px 3px rgba(240, 21, 21, 1), 
            2px 0px 3px rgba(38, 238, 0, 1),
            -2px 0px 3px rgba(158, 29, 243, 1);

*{
    padding:0px;
    margin:0px;
    }
    #box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
                position:relative;
                z-index:100;
}`enter code here`