jquery - 使按钮显示在具有更高 z-index 的 div 上方

Question

演示:https://jsfiddle.net/puch4g8k/2/

我有两个 div:.top 和 .menu。 .menu 应该是汉堡菜单，.btn 应该是汉堡图标。所以当我点击 .btn 时，.menu 必须出现。但如果我这样做，.btn 将留在后面，因为 .top 是 z-index:2 否则顶部菜单将显示在菜单上方。所以我的问题是我需要 .top 显示在 .menu 后面，但其中的 .btn 显示在它上面。这可能吗？

编辑:忘记提及 .top 必须修复。

Answer 1

通过将 .menu 移到 .top 中。

标记将像这样:

<div class="top">
  <button class="btn">Button</button>
  <div class="menu">

  </div>
</div>

注意:添加了菜单项和一些内容来显示.top栏的position:fixed

$menu = $('.menu');
$btn = $('.btn');

$menu.hide();

$btn.on('click', function()
{
	$menu.show();
  $btn.addClass('close');
});

body
{
  margin:0;
  padding:0;
}

.btn
{
  margin-top: 20px;
  position:relative; 
  z-index:5; /* Adding z-index to it so that it stays at the top*/
}

.top
{
  width: 100%;
  height: 60px;
   background-color:#4DD0E1;
  position:fixed;  /* This will make .top fixed */
  top:0;
  left:0;
  overflow:visible;
}

.menu
{
  width:70%;
  position:absolute;
  top:0;
  left:0;
  background-color:#FF5722;
}



/* Can ignore this */

.menu ul{ padding-top:30px; }

.content{ height:500px; } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <button class="btn">Button</button>
  <div class="menu">
  <ul>
		<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
		<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
		<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
		<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
		<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
	</ul>
  </div>
</div>

<div class="content">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>