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。请参阅codepen提供的相关代码。

Do Until RS.EOF
    Response.Write "<tr><td class='tinylink'><a href='www.example.com/"
    Response.Write RS("pal") & "-" & RS("productID")
    Response.Write "'>" & RS("name") & "</a></td></tr>"
    RS.Movenext
Loop

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

Answer 2

要使用z-index，需要定位元素（相对，固定或绝对）。但是，您无需为其提供任何左侧或右侧属性。

.logo {
   display: block;
   position:relative;
   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>

Answer 3

将'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;
}

但这是你真正需要的。请告诉您是否需要更多增强功能。

带图像的Z-index问题

3 个答案: