css - 图像的 Z-index 问题

Question

我有这个代码

.logo {
   display: block;
   z-index: 2;
}

.ellipse {
  background: red none repeat scroll 0 0;
  border-radius: 50%;
    left: 80px;
  height: 100px;
  margin: 0 0 0 -50px;
  position: absolute;
  width: 100px;
  top: 130px;
  z-index: 1;
}

<div class="bloc-logo">
    <div class="logo"><img src="http://1389blog.com/pix/happy-cat-wallpaper-thumbnail.jpg" width="150" height="150" alt="fff" /></div>
    <div class="ellipse"></div>
</div>

我希望图像位于圆形 div 之上。我尝试使用 z-index，但它不起作用。

谢谢你的帮助!

Answer 1

在 .ellipse 上将 z-index 设置为 -1。请参阅提供的代码笔和相关代码。

.ellipse {
  background: red none repeat scroll 0 0;
  border-radius: 50%;
    left: 80px;
  height: 100px;
  margin: 0 0 0 -50px;
  position: absolute;
  width: 100px;
  top: 130px;
  z-index: -1;
}

http://codepen.io/Billy-Purvis/pen/oXEEaM