CODEWITHSUNDEEP
htmlcss
Roger
Roger

Reputation: 238

Z-Index issue Box

I am having problem, aligning the div on 3rd box, Result will be like below.

a busy cat

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/

Upvotes: 0

Views: 66

Answers (3)

Darshak Shekhda
Darshak Shekhda

Reputation: 646

try this 

.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;
}
<div class="hbox">

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

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

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

</div>

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

try pseudo-element :before his code 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;}

Upvotes: 1

karan3112
karan3112

Reputation: 1867

Just a quick fix. Add a div with bg white inside .hbox

CSS

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

DEMO

Upvotes: 1

Related Questions