Question

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

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

另一个问题是链接区域扩展到高于包装图像的高度，但这是一个小问题。

http://jsfiddle.net/hc3jrkku/

Basestructure：

<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

您还可以搜索更多内容并查找以下类似主题：

HTML位置图像位于上方边框和包装链接之后

1 个答案: