为什么盒子阴影被下面的图形元素切割和隐藏？

Question

我现在正在构建的页面上重复使用ui架构。具有特定背景颜色的部分，带有徽标和随机引用的旁边元素以及位于下方的图形元素内的图像。粗略的轮廓是：

<section>
    <aside></aside>
    <figure></figure>
</section>

旁边的风格是：

aside {
    background-color:white;
    text-align:center;
    @include box-shadow(black .1em .1em 1em);
    padding:1em 0;
}

该部分基本上是：

section {
    background-color: #AB6056;
}

没有什么比这更令人惊叹了。但是旁边的盒子阴影被人物元素切断了。

如果我注释掉图形元素，则会显示框阴影。

造成这种行为的原因是什么，是否有办法防止这种行为？最好的问候拉尔夫

Answer 1

这可能是由定位和/或z索引引起的。

在你的情况下，将旁边的位置设置为亲戚应该可以做到这一点：

aside {
    position: relative;
}