Question

我试图在Google日历上放置一个Inset Box Shadow，除非z-index为负数，否则似乎无法显示它。它显示，但用户无法单击/使用日历。我查看了：Add inset box-shadow on Google Maps element但它的z-index设置为负数。我把所有东西都放在了线上，直到我弄明白了。

<div style="box-shadow:inset 0 0 10px #000000; 
            -moz-box-shadow:inset 0 0 10px #000000; width: 900px;">

   <iframe src="https://www.google.com/calendar/embed?showTz=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23ccffff&amp;src=756r34h4d6aqhta6fmaqkijm9k%40group.calendar. google.com&amp;color=%23853104&amp;ctz=America%2FNew_York" style="border-width:0" width="900" height="600" scrolling="no"></iframe>
</div>

我可以看到背后的阴影弹出。我尝试过双重包装，将样式放在iframe等中，并且不能让它在我的生活中起作用。

Answer 1

需要使用相对定位和z-index属性。

试一试，祝你好运！

.the-div {
    position: relative;
    box-shadow: inset 0 0 10px #000;
}

.the-iframe {
    position: relative;
    z-index: -1;
}

按照您的意愿设置...内联CSS或外部，但使用上面的代码来尊重元素

iFrame上的嵌入框阴影（Google日历）

1 个答案: