边框/框架覆盖块内容

Question

我想要一个固定的框架和在它后面流动的内容。我是用边框属性做的。但问题是无法访问带边框的图层下面的内容。它当然可见，但你不能 select 文本（没问题）或点击链接（大问题）。

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

我不是专业人士，它是用于个人投资组合页面的，我希望只使用 html5/css3 来保持它的简单和干净。如果纯 css 不可能，我可能会容忍一些 javascrip。也许是 "clip-path"、"mask" 或者框架不是用 "border" 制作的，而是用没有填充的 SVG 矩形制作的？希望它只是对 html and/or 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

您可以通过添加 z-index 来实现。检查下面的 link。

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

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

Answer 2

您可以使用 pointer-events: none; 但这对 IE 不是很友好。这将允许您 "click through" 框架。 http://caniuse.com/#feat=pointer-events

边框/框架覆盖块内容

border / frame overlay blocks content

html

css

border

z-index