border / frame overlay blocks content

Question

I want to have a fixed frame and the content flowing behind it. I did it with the border property. But the problem is that the content underneath the layer with the border can't be accessed. Its visible of course but you can't select text (no problem) or click links (big problem).

My question is how can I make the content accessible but still keep the frame stay on top.

I'm not a pro, it's for a personal portfolio page and I was hoping to keep it simple and clean with just html5/css3. If its not possible with pure css I might tolerate a bit of javascrip. Maybe something with "clip-path", "mask" or maybe the frame is not made with "border" but instead with an SVG rectangle without a fill? Hopefully its just a smart rearrangement of the html and/or z-indexes? I tried for a hole day but couldn't get it to work.

I made a graphic representation to illustrate the problem:

Here is the code:

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

I really hope someone can find a smart solution for it.

Answer 1

You can use pointer-events: none; but this isn't very IE friendly. This will allow you to "click through" the frame. http://caniuse.com/#feat=pointer-events