如何对元素应用负空格/掩码，以便能够访问其后面的元素？

Question

我使用以下HTML来创建下面的图像

<main role="main" class="">
    <div id="mr-map"></div>
</main>

main元素实质上是您看到的带有圆角的地图区域。灰色边框是带有背景的body元素。

我想做的是在地图区域上有一个嵌入式投影。我确实有一个，但是由于地图是main元素的子元素，因此该地图将其覆盖。

我该怎么做我需要做的事情？

**已更新**

/**
    main.css
 */

body {
    background: #eee !important;
    box-shadow: inset 0 0 15px #333;
    position: relative;
}


main {
    position: absolute;
    top: 56px;
    margin: 10px;
    height: 100% !important;
}
#mr-map {
    background: url('https://i.stack.imgur.com/syQvV.jpg') no-repeat top left /cover;
    min-height: calc(100vh - 20px);

    border-radius: 10px;
}
div.wrapper {
    position: relative;
    width: 100% !important;
}
/*

main {
    top: 56px;
    left: 0;
    position: absolute;
    min-height: calc(100vh - 20px);

    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: inset 1px 1px 25px #ccc;
    z-index: 5;
}
*/

map-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: inset 0 5px 6px rgba(0,0,0,.2), inset 0 5px 12px rgba(0,0,0,.14), inset 0 3px 16px rgba(0,0,0,.12);
    pointer-events: none;
    border: 1px solid white;
}
#mr-map {
    /*height: 100%;*/
}

@media only screen and (max-width: 320px) {
    div.shadow,
    main {
        height: 87%;
        margin: 6.5%;
        width: 87%;
    }
}
@media only screen and (max-width: 460px) {
    div.shadow,
    main {
        height: 90%;
        margin: 5%;
        width: 90%;
    }
}
@media only screen and (max-width: 580px) {
    div.shadow,
    main {
        height: 93%;
        margin: 3.5%;
        width: 93%;
    }
}
@media only screen and (max-width: 768px) {
    div.shadow,
    main {
        height: 95%;
        margin: 2.5%;
        width: 95%;
    }
}
@media only screen and (min-width: 769px) {
    div.shadow,
    main {
        height: 97%;
        margin: 1.5%;
        width: 97%;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>


<div class="wrapper">
    <main role="main" class="">
        <div id="mr-map"></div>
        <map-shadow></map-shadow>
    </main>
</div>