Question

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

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

编辑：忘记提及public class DtoColour { public DtoColour(string name) { Name = name; } public string Name { get; set; } public ICollection<DtoFavouriteColour> FavouriteColours { get; set; } } public class DtoPerson { public DtoPerson(string firstName, string lastName) { FirstName = firstName; LastName = lastName; FavouriteColours = new Collection<DtoFavouriteColour>(); } public string FirstName { get; private set; } public string LastName { get; private set; } public ICollection<DtoFavouriteColour> FavouriteColours { get; set; } } public class DtoFavouriteColour { public DtoColour Colour { get; set; } public DtoPerson Person { get; set; } } public class DomainColour { public DomainColour(string name) { Name = name; } public string Name { get; set; } public ICollection<DomainPerson> People { get; set; } } public class DomainPerson { public DomainPerson(string firstName, string lastName) { FirstName = firstName; LastName = lastName; Colours = new Collection<DomainColour>(); } public string FirstName { get; private set; } public string LastName { get; private set; } public ICollection<DomainColour> Colours { get; set; } }必须修复。

Answer 1

Css

.top
{
  width: 100%;
  height: 60px;
  position:absolute;
  background-color:#4DD0E1;
  z-index:1000;
}

demo Link

Answer 2

在.menu内移动.top。

标记将是这样的：

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

  </div>
</div>

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

$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>

Answer 3

试试这个小提琴：

https://jsfiddle.net/puch4g8k/8/

更改了css：

.btn
{
  margin-top: 20px;
  position:fixed;
  z-index:1000;
}

.top
{
  width: 100%;
  height: 60px;  
  background-color:#4DD0E1;
  z-index:2;
  position:fixed;    
}

我也把.btn放在.top

之外

它能解决你的问题吗？

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

3 个答案: