边框/框架覆盖阻止内容

Question

我希望有一个固定的框架和背后的内容。我用border属性做了。但问题是无法访问带边框的图层下面的内容。它当然可见，但你不能选择文字（没问题）或点击链接（大问题）。

我的问题是如何让内容可访问，但仍保持框架保持最佳状态。

我不是专业人士，而是个人投资组合页面，我希望通过html5 / css3保持简单和干净。如果它不可能与纯css我可能容忍一点javascrip。也许某些东西有“剪辑路径”，“掩码”或者框架不是用“边框”制作的，而是用一个没有填充的SVG矩形？希望它只是对html和/或z索引的智能重新排列？我试过了一天，却无法让它发挥作用。

我做了一个图形表示来说明问题：

以下是代码：

* { box-sizing: border-box; }
html, body { margin: 0; }

body{
  font-family: sans-serif;
  font-weight: bolder;
}

.max, .content{
  overflow: hidden;
}

.max{
  position: fixed;
  border: 1em solid black;
  top: 2em;
  right: 2em;
  bottom: 2em;
  left: 2em;
}

.one, .two{
  position: absolute;
  font-size: 2em;
  color: white;
  background-color: black;
  padding: 0.1em;
}

.one{
  top: -0.25em;
  left: 0;
}

.two{
  bottom: -0.25em;
  right: 0;
}

.content{
  display: flex;
  width: 100%;
  height: 100vh;
}

.link{
  margin: auto;
  color: white;
}

.content:nth-child(1){
  background-color: red;
}

.content:nth-child(2){
  background-color: green;
}

.content:nth-child(3){
  background-color: blue;
}

<div class="max">
  <span class="one">I AM A ...</span>
  <span class="two">FIXED FRAME</span>
</div>
<div id="wrapper">
  <div class="content">
    <a class="link" href="#">
      <h1>LINK</h1>
    </a>
  </div>
  <div class="content">
    <a class="link" href="#">
      <h1>LINK</h1>
    </a>
  </div>
  <div class="content">
    <a class="link" href="#">
      <h1>LINK</h1>
    </a>
  </div>
</div>

我真的希望有人可以找到一个聪明的解决方案。

Answer 1

您可以使用pointer-events: none;，但这不是非常友好的IE。这将允许您“点击”框架。 http://caniuse.com/#feat=pointer-events

Answer 2

您可以通过添加z-index来实现。请查看以下链接。

http://jsfiddle.net/XfzFQ/616/

h1{
    position:relative;
    z-index:1;
}