javascript - 出现在父元素顶部的子元素的框阴影

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);
}

但是 child 的影子出现在了 parent 的上面:

而且我不能将父项放在子项之上，因为父项的阴影会显示在子项之上。

如何在使两个元素看起来像一个元素的同时保留两者的阴影？

实例: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);

我希望这对你有用。