z-index定位，制作toolbar

Question

我对以下上下文中一个 div 相对于另一个的正确定位有疑问：

我正在根据我的代码片段为 .col-9.h-100 制作工具栏。我希望它在单击鼠标时显示在 .col-9.h-100 上方。我知道不可能使 .col-9.h-100 的子元素 z-index 属性高于父元素，这就是为什么我要制作具有相同尺寸的兄弟元素并希望它出现在 .col-9.h-100 之上，height 大小约为 .col-9.h-100.

的 20%

$('.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>

我尝试了许多具有不同 display 和 z-index 样式选项的组合，但其中 none 使我得到了想要的结果。

如您所见，当您运行工具箱的片段显示时大小正确但位置错误。我应该玩什么 z-index 和 display "game" 才能让它们按正确的顺序排列？

你能告诉我实现这个目标的正确方法吗？提前致谢。

Answer 1

您应该将您的自定义类添加到您要在 javascript 中处理的元素中，以避免最近把事情搞砸。还要尽量避免创建这样的 html 元素，因为它会产生良好的性能影响 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>

z-index定位，制作toolbar

z-index positioning, making toolbar

css

jquery

z-index

bootstrap-4