<div class="icon-bar" style="z-index: 2;">
        <a href="#" class="setting" style="border-radius: 0px 9px 10px 0px;" onclick="cardopen()"><i class="fa fa-cog fa-2x"></i></a>
    </div>
  <div class="container">
        <div id="card" class="card" style="display: none; width: 374px; left: 70px; top: 40px;z-index: 2;position: fixed;">
            <div class="card-body">
<!-- Material input -->
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Example label</label>
</div>
<div class="md-form col-md-12">
<div class="row">
<button type="button" class="btn btn-primary" style="float:left">click here</button>
<button type="button" class="btn btn-primary">clcking chere</button>

</div>
</div>
</div>
</div>
</div>

<div class="container">
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
    </div>
    <br>
    <br>
    <div class="container">
<p>testing2</p>
<p>testing2</p>
<p>testing2</p>
<p>testing2</p>
    </div>
    <div style="margin-bottom: 800px;">

    </div>

.icon-bar {
  position: fixed;
  top: 15%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: black;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: #999595;
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: black;
  font-size: 20px;
}



.setting {
  background: #3B5998;
  color: black;
}

function cardopen() {
  var x = document.getElementById("card");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}