出现在父母顶部的儿童元素的箱子阴影

Question

现在我正在为父（.map）和子（.toggle-button）使用框阴影：

.map {
    position: fixed;
    top: 20px;
    right: 0;
    width: 280px;
    height: 280px;
    z-index: 9999;
    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}
.map .toggle-button {
    background: #fff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -20px;
    width: 20px;
    height: 68px;
    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}

但是孩子的阴影出现在父母的上方：

我无法将父母置于孩子的上方，因为父母的阴影会显示在孩子的上方。

如何在将两个元素看作一个元素的同时保留两者的阴影？

实例：https://desolate-island-90618.herokuapp.com/#!/

Answer 1

我为你尝试了一些东西。 你能尝试这样做吗？：

更改课程 .map .toggle-button 以下代码

box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);

为：

box-shadow: -6px 1px 6px rgba(0, 0, 0, 0.3);

我希望这对你有用。

Answer 2

更改阴影的角度将帮助您..更新您的代码，如下所示..

.map .toggle-button{
   box-shadow:-6px 1px 6px 0 rgba(0, 0, 0, 0.3);
}