z-index positioning, making toolbar

I have question about proper positioning of one div over another in the following context:

I am making toolbar for .col-9.h-100 from my snippet. I want it to appear over .col-9.h-100 on mouse click. I know that it is not possible to make a child element of .col-9.h-100 with z-index property higher than parent, that is why I am making a sibling element with the same dimensions and want it to appear on top of .col-9.h-100 with height size about 20% of .col-9.h-100.

$('.col-9.h-100').click(function(){
	
	$("\
  	<div class='row' id='rowToolbar'>\
      <div class='col-9 h-100'>\
        <div id='toolbar'>\
          <button class='btn btn-primary controls'>addNode</button>\
        </div>\
      </div>\
    </div>\
  ").appendTo($('body'))
})

html,
body {
  height: 100%;
}

.row{
  margin:0!important;
}

#rowToolbar{
}

.col-9.h-100{
  background-color:lightgray;
  padding:0;
}

.col-3.h-100{
  background-color:lightblue;
}

#toolbar{
  background-color:white;
  display:inline-block;
  width:100%;
  height:20%;
}

.controls{
  float:right!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="navbar navbar-light bg-faded justify-content-between">
  <a class="navbar-brand" href="#">MAIN</a>
</div>

<div class="row h-100 w-100">
  <div class="col-9 h-100"></div>
  <div class="col-3 h-100"></div>
</div>

I tried many combinations with different display and z-index style options but none of them led me to the wanted result.

As u see when u run the snippet the toolbox appears with right sizing but in wrong place. What z-index and display "game" should I play to position them in the right order?

Could u please show me the right way for achieving this. Thanks in advance.

Solution

You should add your custom classes to the elements you are going to handle in javascript to avoid messing things up lately. Also try to avoid creating html elements like this because it can have a good performance impact http://jsben.ch/zygb0

$('.content').click(function(){
	$("\
  	<div class='row'>\
        <div class='toolbar'>\
          <button class='btn btn-primary controls'>addNode</button>\
      </div>\
    </div>\
  ").appendTo($('.content'));
});
$('.content').on('click', '.controls.btn', function(){
  return false;
});

html,
body {
  height: 100%;
}

.content {
  background-color:lightgray;
  padding:0;
}

.toolbar {
  margin: 10px;
  display:inline-block;
  width:100%;
  height:20%;
}

.sidebar {
  background-color:lightblue;
}

.controls{
  float:right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<body>
  <div class="navbar navbar-light bg-faded justify-content-between"><a class="navbar-brand" href="#">MAIN</a>
  </div>
  <div class="row h-100 w-100">
    <div class="content col-9 h-100"></div>
    <div class="sidebar col-3 h-100"></div>
  </div>
</body>