iFrame（Google日曆）上的嵌入框陰影

Question

我試圖在Google Calender上放置插入框陰影，似乎無法使其顯示出來，除非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或外部的，但使用上面的代碼爲尊重元素