Z-Index问题框

Question

我遇到问题，在第3个框上对齐div，结果将如下所示。

a busy cat http://oi61.tinypic.com/15i7mt3.jpg

HTML

<div class="hbox">

<div class="h1"></div>

    <div class="h2"></div>

    <div class="h3"></div>

</div>

CSS

.hbox
{
float: left;
width: 323px;
height: 188px;
margin: 88px 0 0 5px;
background:url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
}

.h1
{float: left;
position: relative;
    width:62px;
    height:62px;
    border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#000;}

http://jsfiddle.net/1mmj24ny/

Answer 1

试试这个

＆＃13;

＆＃13;

.hbox {
  float: left;
  width: 323px;
  height: 188px;
  margin: 88px 0 0 5px;
  background: url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
  position: relative;
}
.hbox:before {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 115px;
  left: 27px;
  position: absolute;
  top: 58px;
  width: 282px;
  z-index: 10;
}
.h1 {
  float: left;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  left: 79px;
  top: 24px;
  z-index: 2;
  background: #000;
}
.h2 {
  float: left;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  left: 79px;
  top: 24px;
  z-index: 2;
  background: #ccc;
}
.h3 {
  float: left;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  left: 79px;
  top: 24px;
  z-index: 2;
  background: #ff0000;
}

＆＃13;

<div class="hbox">

  <div class="h1"></div>

  <div class="h2"></div>

  <div class="h3"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

快速修复。在white

中添加带有bg .hbox的div

CSS

    .white_div {
    position: absolute;
    width: 282px;
    height: 110px;
    background: #fff;
    bottom: 17px;
    left: 27px;
    z-index:100;
}

DEMO

Answer 3

尝试伪元素:before他的代码DEMO

.hbox
{
float: left;
width: 323px;
height: 188px;
margin: 88px 0 0 5px;
background:url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
    position:relative;
}

.hbox:before {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 115px;
    left: 27px;
    position: absolute;
    top: 58px;
    width: 282px;
    z-index: 10;
}

.h1
{float: left;
position: relative;
    width:62px;
    height:62px;
    border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#000;}

.h2
{float: left;
position: relative;
    width:62px;
    height:62px;
    border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#ccc;}


.h3
{float: left;
position: relative;
    width:62px;
    height:62px;
    border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#ff0000;}