Question

我对以下背景下一个div正确定位另一个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样式选项的组合，但它们都没有让我获得想要的结果。

正如您所看到的那样，当您运行代码段时，工具箱会显示正确的大小，但位置错误。我应该使用z-index和display“游戏”来按正确的顺序排列它们？

请你告诉我实现这一目标的正确方法。提前谢谢。

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定位，制作工具栏

1 个答案: