HTML 定位图像在边框和上方的环绕链接后面

Question

我有一个带有参差不齐的边框的内容 div（使用边框图像），我在内容 div 的左侧和右侧分别放置另一个 div 来保存图像。这张图片应该有链接。虽然图像通过边框很好地显示了链接区域被它隐藏。鉴于我的参差不齐的边框相当宽（几乎 100 像素），这感觉很混乱。因此，我想将图像“浮动”在边框下方和上方的实际链接区域，以便在图像位于边框下方或通过边框可见时，链接也是可点击的。

尽管没有上传背景图片，但效果变得可见，因为边框是黑色的。该结构包括一个最小的标头，它对问题并不重要，但它是根结构的一部分。

另一个问题是链接区域的高度超过了包裹图像的高度，但这是一个小问题。

http://jsfiddle.net/hc3jrkku/

基础结构：

<header>
    <nav>
        <a href='?p=faq#faq' id='faq'>
            FAQ
        </a>
    </nav>
</header>
<div class='leftSide'>
    <a href="#anchor" class="bgImage"><img src="img/some.png" style="
    position: relative;
    z-index: -1;
    opacity: .99;
    border: 1px solid red;
    width: 150px;
    height: 200px;
    background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>

CSS：

* {
    box-sizing: border-box
}

body {
    margin: 0;
}

.leftSide{
    position: fixed;
    z-index: 0;
    top: 20px;
    right: 50%;
    transform: translateX(-50%);
    width: 808px;
    height: 100%;
    display: flex;
    justify-content: flex-end; 
    margin-right:-93px;
    padding: 15px 93px 90px 0;
}

.rightSide{
    position: fixed;
    z-index: 0;
    top: 20px;
    left: 50%;
    transform: translateX(50%);
    width: 808px;
    height: 100%;
    margin-left:-93px;
    padding: 15px 0 90px 93px;
}

a.bgImage {
    z-index:900;
    opacity:.99;
    border:2px dashed blue
}

.rightSide .bgImage {
margin-left: -93px;
}

.leftSide .bgImage {
margin-right: -93px;
}

main {
    width: 808px;
    min-height: 400px;
    margin: 20px auto 0;
    position: relative;
    z-index: 50;
    border-style: solid;
    border-width: 0px 93px 127px 93px;
    border-image: url(img/paperedge.png) 0 93 127 93 fill round;
    padding-top:10px;
}

header {
    height: 20px;
    background: #ffffff url(img/header_bg.png) repeat-x bottom;
    border-bottom: 1px solid #000000;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100
}

nav {
    display: flex;
    justify-content: center;
}

读过http://philipwalton.com/articles/what-no-one-told-you-about-z-index/，我也尝试创建新的上下文，并剥离包含z-index的左/右背景图像的div，但是我当前的代码取决于transform/position从而为父元素创建一个新的上下文。三明治堆叠（页面其他部分上方的一些孩子/下面的其他部分）是否可能？

Answer 1

如果您希望图像位于 border（或您的内容 div）后面，您可以将其添加到前面 div 的 CSS：

main {
    pointer-events: none;
}

这将杀死 div 上的事件并使后面的事件在前面可见：DEMO

您还可以搜索更多并找到这些类似的主题：

1. HTML "overlay" which allows clicks to fall through to elements behind it

2. HTML/CSS: Make a div "invisible" to clicks?