html - 边框/框架覆盖 block 内容

Question

我想要一个固定的框架和在它后面流动的内容。我用 border 属性做到了。但问题是无法访问带边框的图层下面的内容。它当然可见，但您不能选择文本(没问题)或单击链接(大问题)。

我的问题是如何使内容可访问，但仍使框架保持在顶部。

我不是专业人士，它用于个人投资组合页面，我希望仅使用 html5/css3 使其保持简单和干净。如果它不可能使用纯 css，我可能会容忍一些 javascrip。也许是带有“剪辑路径”、“蒙版”的东西，或者框架不是用“边框”制作的，而是用没有填充的 SVG 矩形制作的？希望它只是 html 和/或 z-indexes 的智能重新排列？我尝试了一个 hole day，但无法正常工作。

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

代码如下:

* { 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