Question

我之前从未遇到过这方面的问题，但现在看来这张图片并不想出现在div的顶部。我甚至尝试了z-index，但它显示在下面。

图片是：http://www.flaticon.com/free-icon/menu-button-of-three-lines-outline_60310

#menu-square {
	height: auto;
}
#top-menu {
	height: 3em;
	width: 100%;
	background-color: black;
}

<!--All content-->
<div id="sb-site">
	<div id="top-menu">
		<!--Toggle sidebar menu------------------------------------------------->
		<a href="#" class="sb-toggle-left button"><img src="../menu54.svg" id="menu-square"></img></a>
	</div>
</div>

Answer 1

您的问题是您的背景与图片颜色相同。请参阅下面的代码，我已经更改了背景颜色并且工作正常。

在这种情况下，您不需要z-index。此外，<img>代码无需关闭：<img src="..." />。

#menu-square {
  height: 10px;
  width: 10px;
}
#top-menu {
  height: 3em;
  width: 100%;
  background-color: AliceBlue;
}

<!--All content-->
<div id="sb-site">
  <div id="top-menu">
    <!--Toggle sidebar menu------------------------------------------------->
    <a href="#" class="sb-toggle-left button">
      <img src="http://cdn.flaticon.com/png/256/60310.png" id="menu-square" />
    </a>
  </div>
</div>

Answer 2

更改#top-menu的背景颜色，更改image size % to px,

http://jsfiddle.net/6xsa1vhg/2/

如何使这个图像出现在div的顶部

2 个答案: