使固定div中的菜单栏可单击

Question

因此，在单击div容器以关闭菜单时遇到麻烦。每当我单击“ p”区域时，它都起作用，但是，如果我单击转换后的“ X”条，它将不起作用。我什至尝试给每个元素一个z-index。有谁知道为什么点击不能作用在“ X”上？

注意：我确实有2个带有此“关闭X”元素的重叠式I框架。

这是我的SCSS：

.closeIframe {
    position: fixed;
    top: 4%;
    right: 4%;
    cursor: pointer;
    z-index: 200;

    p {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .xWrap {
        display: inline-block;
        z-index: 199;
        height: 20px;

        .x {
            width: 20px;
            height: 2px;
            background-color: $color-black;
        }

        .crossTop {
            -webkit-transform: rotate(45deg) translate(8px, 10px);
            transform: rotate(45deg) translate(8px, 10px);
        }

        .crossBottom {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }
    }
}

这是我的HTML：

<div id="impressumOverlay" class="iframe">
    <div class="closeIframe">
        <p class="upperC">Close</p>
        <div class="xWrap">
            <div class="x crossTop">
            </div>
            <div class="x crossBottom">
            </div>
        </div>
    </div>
    <iframe id="impressumIframe" src="impressum.html" width="100%" height="100%"></iframe>
</div>

JS的片段：

var impressumIframe = document.getElementById('impressumOverlay');

function addListeners() {
    var closeIframe = document.querySelectorAll('.closeIframe');
    for (var l = 0; l < closeIframe.length; l++) {
        closeIframe[l].addEventListener('click', closeIframes, false);
    }
}

function closeIframes(e) {
    if (e.target.parentNode.parentNode.id === "impressumOverlay") {
        impressumIframe.style.display = 'none';
    }
}

addListeners();