弹出窗口被下面的div切断

Question

我希望弹出文本区域显示在div上方，而不要被截断。但是，我似乎无法实现这一目标。我试着使用.hideform的z-index将其放在顶部，但这没有用。 （现在看来，弹出窗口似乎卡在了文本区域中，但我希望它们分开）

HTML

<div class="row">
  <div class="l-board col-xs-12 col-xs-offset-1">
    <h1 class="l-board-title"><b>Education</b></h1>
    <div class="center hideform">
      Education :
      <button class="btn btn-default" id="close" style="float: right;">X</button>
      <br><br>
      <form action="{{route('updateEducation')}}" method="POST">
        {{ csrf_field() }}

        <textarea required id="content" class="form-control my-editor" name="content" placeholder="Please describe education goal..." rows="8">{{\Auth::user()->education()->get()[0]['content']}}</textarea>


        <div style="text-align: right; margin-top: 10px">
          <button type="submit" class="btn btn-default">
                                                Submit
                                            </button>
        </div>
      </form>
    </div>
    <div style="text-align: right">
      <a id="show" style="color: darkgrey">Edit</a>
    </div>
    <p class="l-board-content" style=" white-space: pre-line;"> {{\Auth::user()->education()->get()[0]['content']}}</p>
  </div>
</div>

CSS

.l-board:before {
    content: '';
    width: 30%;
    height: 4px;
    background: #a5d5a7;
    position: absolute;
    top: -4px;
    left: 0px;
}
.l-board {
    background-color: #F5FCF4;
    min-height: 250px;
    overflow: auto;
    margin-top: 32px;
    margin-left: 5%;
    margin-bottom: 32px;
    box-shadow: 0 0 10px #DDDDDD;
    word-wrap: break-word;
}
.l-board-title {
    font-size: 14px;
    color: #a5d5a7;
}
.l-board-content{

    min-height: 190px;
    overflow-y: auto;
    font-size: 12px;

}

.center {
  margin: auto;
  background: white;
  width: 80%;
  /*top: 0;*/
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: relative;
  z-index: 99 !important;
}

.hideform {
  display: none;
  position: absolute;
  margin-left: 5%;
}