z- 인덱스 하위 개체

나는 그 측면에 z- 인덱스를 사용하는 CSS 리본이 있습니다. 용기의 깊이가 assumably 리본의 여백이 표시되지 않습니다 0으로 설정되어 있기 때문에 z- 인덱스 하위 개체

enter image description here

나는, 그러나, 컨테이너를 통해 그 객체를 배치 할.

<center><div style="background: black;width: 500px; height:600px;"> 
<img src="http://m3.i.pbase.com/u45/gaocus/upload/34638653.160x160hawk1301b.jpg" alt="" style="position:absolute;" /> 
<div id="ribbon"> 
    <div id="r_content">Text</div> 
</div>

http://jsfiddle.net/Ws4CD/ 어떻게 완전히 리본 쇼를 만들 수 있습니까?

출처

2014-03-05 Gabe

이 가지 이상 볼 수 있어요 ['

'] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)에서 CSS3 프로젝트 ... – Passerby

@Passerby 나는 ''의 부족으로 더 화가났다. –

z- 색인을 음수에서 양수로 변경하십시오 (코드 참조). 문제는 배경의 z-index이 0 인 것으로 모든 요소의 기본값입니다. 따라서 z- 인덱스를 0에두면 검정색 배경 뒤로 리본 부분을 보냅니다.

#ribbon { 
     padding: .34em 1em; 
     width: 129px; 
     margin-top: 130px; 
     position:relative; 
     color: #ffffff; 
     font: 16px 'Patua One', sans-serif; 
     text-align: center; 
     letter-spacing:0.1em; 
     text-shadow: 0px -1px 0px rgba(0,0,0,0.3); 
     box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), 
        inset 0px 0px 20px rgba(0,0,0,0.1), 
        0px 1px 1px rgba(0,0,0,0.4); 
     background: #1eb2df; 
     display: inline-block; 
    } 

#ribbon:before, #ribbon:after { 
     content: ""; 
     width:.2em; 
     bottom:-.5em; 
     position:absolute; 
     display:block; 
     border: .9em solid #1eb2df; 
     box-shadow:0px 1px 0px rgba(0,0,0,0.4); 
     z-index:0; 
    } 

#ribbon:before { 
     left:-1.35em; 
     border-right-width: .75em; 
     border-left-color:transparent; 
    } 

#ribbon:after { 
     right:-1.35em; 
     border-left-width: .75em; 
     border-right-color:transparent; 
    } 

#r_content:before, #r_content:after { 
     content:""; 
     bottom:-.5em; 
     position:absolute; 
     display:block; 
     border-style:solid; 
     border-color: #0675b3 transparent transparent transparent; 
     z-index:1; 
    } 

#r_content:before { 
     left: 0; 
     border-width: .5em 0 0 .5em; 
    } 

#r_content:after { 
     right: 0; 
     border-width: .5em .5em 0 0; 
    }

바이올린 : http://jsfiddle.net/mB3rn/

출처

2014-03-05 07:39:26 Hardy

질문을 읽고 두 번째 바이올린을 확인하십시오 .. http://jsfiddle.net/Ws4CD/ – Hardy

z- 인덱스 하위 개체

답변

관련 문제