Another z-index problem

This is my pen: https://codepen.io/ethn96/pen/ROzojX
I want the quotemark to lie under the text, but z-index is not working.
Below are my html and css code:

<div class="frame">
  <div class="quote">
    <p>I know quite certainly that I myself have no special talent; curiosity, <span class="tooltip" onclick='void(0)'>obsession
      <span class="info">
        <span class="pronounce">[əbˈseʃ(ə)n]&nbsp&nbsp<span class="fa fa-volume-up"></span></span>
        <span class="text">
          <b>Obsession</b>, a persistent disturbing preoccupation with an often unreasonable idea or feeling.
        </span>
      </span>    
      </span> and dogged endurance, combined with self-criticism have brought me to my ideas.</p>
    </div>
    <p class="author">Albert Einstein</p>
  
</div>
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600');

.frame {
  position:absolute;
  width:400px;
  height:400px;
  background:#4CB6DE;
  top:50%;
  left:50%;
  margin-top:-200px;
  margin-left:-200px;
  border-radius:2px;
  box-shadow:0px 0px 13px 0px rgba(0,0,0,0.4);
  color:#fff;
  font-family:'Open Sans', sans-serif;
}

.quote {
  position:relative;
  margin-top:90px;
  padding-left:30px;
  padding-right:30px;
}

.quote:before {
  content:"„";
  position:absolute;
  top:-240px;
  left:7px;
  color:#6AC2E3;
  line-weight:35px;
  font-size:250px;
  font-family:Arial;
  z-index:0;
  
}

.quote p {
  poaition:relative;
  font-size:24px;
  z-index:1;
  margin-top:0px;
  display:block;
  line-weight:35px;
}

.author {
  font-style:italic;
  padding-left:30px;
  margin-top:20px;
  font-size:20px;
}

.quote .tooltip {
  cursor:pointer;
  background:#286F8A;
  
}

.quote .tooltip:hover .info,
.quote .tooltip:focus .info {
  visibility:visible;
  background:#286F8A;
  opacity:1;
  transform:translate3d(-200px,-129px,0);
}

.quote .tooltip .info {
  visibility:visible;
  position:absolute;
  width:300px;
  background:#286F8A;
  box-sizing:border-box;
  opacity:0;
  font-size:16px;
  line-weight:20px;
  cursor:text;
  transform:translate3d(-200px,-220px,0);
  transition: transform 1.5s ease-out;
  padding-bottom:5px;
}

.quote .tooltip .info:after {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:#286F8A;
  transform:translate3d(100px,0,0) rotate(45deg);
}

.quote .tooltip .info .pronounce {
  background:#fff;
  display:block;
  color:#286F8A;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:15px;
}

.quote .tooltip .info .text {
  display:block;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:15px;
}
.fa {
  position:absolute;
  display:inline-block;
  width:10px;
  height:10px;
  border: 1px solid #286F8A;
  cursor:pointer;
  margin-top:7px;
  
}

.fa:hover {
  position:absolute;
  display:inline-block;
  width:10px;
  height:10px;
  border: 1px solid #286F8A;
  cursor:pointer;
  margin-top:7px;
  transform:scale(1.15);
  transition: all 1s ease-out;
  box-shadow:0px 0px 3px 0px #286F8A;
}

You have typos in the CSS. It is position not poaition

.quote p {
  poaition:relative;
  font-size:24px;
  z-index:1;
  margin-top:0px;
  display:block;
  line-weight:35px;
}