html - Z-Index 问题框

Question

我有问题，对齐第 3 个框上的 div，结果如下所示。

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

试试伪元素: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;}