Z-Index問題框

我有問題，在第三個框對齊div，結果將如下所示。Z-Index問題框

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/

來源

2014-09-25 Roger

具體在哪裏是你的問題？ – 2014-09-25 12:15:31

請提供更多關於你想要完成什麼的細節，以及哪些問題阻止你達成目標。謝謝！ – 2014-09-25 12:15:33

我已經爲此做了jsfiddle，z-index失控 – Roger 2014-09-25 12:16:11

嘗試僞元素: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;}

來源

2014-09-25 12:25:44

試試這個

.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>

來源

2014-09-25 12:22:48

不同於後附圖片 – Roger 2014-09-25 12:25:45

我使用的是http://oi61.tinypic.com/15i7mt3.jpg圖片。在我的例子中。如果沒有使用這個圖像比給我鏈接圖像將在例子中使用。 – 2014-09-25 12:28:11

http://oi59.tinypic.com/96j3g0.jpg – Roger 2014-09-25 12:30:43

只是一個快速修復。與BG white添加一個div內.hbox

CSS

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

DEMO

來源

2014-09-25 12:23:50 karan3112

回答

相關問題