CSS 스타일 위에 필드가 나타나게하기

Question

Hello ive는 CSS로 별을 만들었지 만 별 앞에 보이게하는 필드는 숨기고 있습니다. 나는 누군가가 내가 그것을 고치기 위해해야하는 것에 올바른 방향으로 가르키고 있는지 궁금해하고 있었다. 감사

<div class="views-field views-field-field-freebetamount"> 
<div class="field-content"> 
<div id="star12">£200</div> 
</div> 
</div> 

CSS

.views-field-field-freebetamount { 
color:white; 
} 

#star12 { 
background: blue; 
width: 40px; 
height: 40px; 
position: relative; 

} 

#star12:before, #star12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 40px; 
width: 40px; 
background: blue; 
} 

#star12:before { 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
} 

#star12:after { 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
} 

희망 별의 상단에 표시해야 freebetamount 필드. 내 제한된 CSS 기술로 인해 Z- 색인을 사용해 보았지만 아무 소용이 없었습니다.

누구나?

감사 CSS로

Answer 1

당신은 :before 및 :after 의사 요소에 negative z-index 값을 정의해야합니다.

#star12 { 
background: blue; 
width: 40px; 
height: 40px; 
position: relative; 
    font-size:1.3em; 
} 

#star12:before, #star12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 40px; 
width: 40px; 
background: blue; 
    z-index:-1; 
} 

확인 Demo.

Answer 2

유 당신은 Z- 인덱스를보고 싶을거야 다른 사람

Answer 3

위에 무언가를 배치하는 그런 z-index: 100 또는 뭔가를 설정해야합니다. 다른 요소 위에 표시하려는 요소가 더 높은 CSS z- 색인 번호를 가져야합니다.

(css 파일);

#yourID { 
z-index: 99; 
}