Z- 색인 문제 상자

제 3 상자에 div를 정렬하면 문제가 발생하며 결과는 아래와 같습니다.Z- 색인 문제 상자

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

특별히 문제가 시도? –

달성하고자하는 목표와 목표를 달성하지 못하는 문제에 대해 자세히 설명해주십시오. 감사! –

나는 이것을 위해 jsfiddle을 만들었고, Z- 인덱스는 통제 불능이다. – Roger

는 의사 요소 :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

http://oi61.tinypic.com/15i7mt3.jpg 이미지를 사용 중입니다. 내보기에서. 이 이미지를 사용하지 않을 경우 나에게 이미지 링크를 사용하는 것보다 예를 들어 사용할 것입니다. –

http://oi59.tinypic.com/96j3g0.jpg – Roger

빠른 수정. .hbox

CSS 내부 BG white와 사업부를 추가

.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

Z- 색인 문제 상자

답변

관련 문제