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

Question

我试图在谷歌日历上放置一个嵌入框阴影，除非 z-index 为负数，否则似乎无法显示它。它显示，但随后用户无法单击/使用日历。我看了看：在 Google Maps 元素上添加插入框阴影， 但它的 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 或外部，但使用上面的代码作为尊重的元素