Twitter에서 CSS dog-ear 효과를 재현하는 방법이 있습니까?

Question

트위터에서 리트 윗이나 즐겨 찾기를 사용하면 트윗이 포함 된 div 모서리에 아이콘이있는 약간 색이 달린 삼각형이 나타납니다. 나는 트위터에서 CSS와 스프라이트 시트를 복사 해 내 사이트에서 다시 만들려고했으나 계획을 세우지 않았다. (삼각형은 똑같은 CSS를 사용하지 않았다.) 그럼, 어떻게 내 사이트에있는 div의 구석에 삼각형 '개 귀'효과를 추가 할 수 있을까요? ,

<i class="dogear"></i> 

내가 URI 내가 클래스 이름을 변경하려고했다 스프라이트 시트를 변경 :

.dogear { 
    position:absolute; 
    top:0; 
    right:0; 
    display:none; 
    width:24px; 
    height:24px; 
} 

.retweeted .dogear { 
    background-position:0 -450px; 
} 

.favorited .dogear { 
    background-position:-30px -450px; 
} 

.retweeted.favorited .dogear { 
    background-position:-60px -450px; 
} 

.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{ 
    display:block; 
} 

i { 
    background-image: url("../sprite.png") !important; 
    display: inline-block; 
    vertical-align: text-top; 
    background-image: url("../sprite.png"); 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
} 

그리고 사용하여 HTML에 삽입 :

이 내가 트위터에서 복사 한 코드를했다 몇 가지를 추가하여 정확하게 동일하지 않았습니다. 이 효과를 적용 할 수 있습니까?

감사합니다 :)

Answer 1

당신은 당신이 그것을 겹쳐 표시 할 요소의 상단에 표시되도록 강아지 귀를 포함하는 요소에 더 큰 z-index 속성을 추가해야합니다.

z-index은 절대적으로, 상대적으로 또는 고정되어있는 요소의 스택 순서를 제어하는 ​​데 사용됩니다.

z-indexon the Mozilla Developer Network에 대한 자세한 내용을 볼 수 있습니다.

또한 붙여 넣은 코드에서 알 수있는 것과는 별도로 dogear 클래스를 사용하고 있습니다. 스타일 시트의 클래스 정의를 보면 표시되지 않는다고 말합니다 : display: none;