css使div超过两个div

Question

请检查此图片

我想点击红色圆圈内的+标志，进行div显示。这个div有很多复选框。

我已经制作了div。但我不知道它的风格是高于text还是高于white space in the image

如果我无法理解我的意思，我很抱歉。

<h3>html</h3>

<div class="chartHeaderClass" style="width: 100%;">
    <h3>Service Level Per Campaign</h3>
    <%-- Start Dropdown Code --%>
    <a id="DropdownSeviceLink" href="#">+</a>
    <script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
    <%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
    <canvas class="overlay" width="479" height="265"></canvas>
</div>

div是id = div1，我没有显示其内容，因为这对答案无关紧要，但我不知道在哪里放。

我想有这样的div

请帮助

Answer 1

您需要使用两个主要的CSS属性。 position: absolute将其放置在那里并z-index将其“置于”其他项目之上。要使position: absolute生效，您还需要将父级设置为position: relative。

下拉列表默认存在但隐藏。单击 + 时，会在菜单上切换一个类以显示/隐藏它。

主要部分：

HTML：

<div class="chartHeaderClass" style="width: 100%;">
    <h3>Service Level Per Campaign</h3>
    <a id="DropdownSeviceLink" href="#">+</a>
    <div class="menu">
      lkj sldkj sldkj slkdj slkdj
    </div>
</div>

CSS：

.menu {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}
.menu.shown{
  display: block;
}
.chartHeaderClass {
  position: relative;
}

JS：

$('#DropdownSeviceLink').on('click', function(){
  $(this).parents('.chartHeaderClass').find('.menu').toggleClass('shown');

  return false;
});

这是一个丑陋的代码，可以帮助您实现目标。 http://codepen.io/anon/pen/poqjK

Answer 2

如果你需要制作＆＃34;胶合＆＃34;在子项中，您必须定义父项的相对位置，绝对位置和子项（z）的z-index。

#div1 {
    position: absolute;
    top: 32px;
    right: 0;
}

jsfiddle