Internet Explorer의 이미지 위에있는 텍스트

Question

현재 IE에서 내 z- 색인에 문제가 있습니다.

이 div에는 이미지가 있고이 이미지 위에는 일부 텍스트가 있습니다.

내가 몇 가지를 발견 ...

#content_right { 
width: 230px; 
height: 484px; 
float: right; 
} 

.mini_bloc_image { 
height: 148px; 
margin-bottom: 20px; 
position: relative; 
} 

.mini_bloc_image > img { 
position: absolute; 
} 

.mini_bloc_image > span:first-of-type { 
display: block; 
position: absolute; 
top: 95px; 
left: 0px; 
font-size: 1.1em; 
background-color: #ffffff; 
padding: 4px 5px 4px 5px; 
} 

.mini_bloc_image > span:last-of-type { 
display: block; 
top: 95px; 
left: 0px; 
position: absolute; 
left: 50px; 
top: 125px; 
color: #ffffff; 
font-size: 1.1em; 
font-family: 'Marck Script', cursive; 
} 

IE 이미지 이상이어야 내 텍스트를 이해하지 않습니다

<section id="content_right"> 

        <div class="mini_bloc_image"> 
         <img alt="Camionnette VCI" src="img/mini_reparation_site_nb.png" /> 
         <span><a href="#">R&eacute;paration sur site</a></span> 
         <span>Nous nous d&eacute;pla&ccedil;ons</span> 
        </div> 

와 CSS : 여기

내 HTML 코드입니다 http://www.adrenatie.com/z-index-et-ie6/ 또는 http://systembash.com/content/css-z-index-internet-explorer/과 같은 솔루션이 있지만 작동하지 않습니다.

누군가 나를 도와 줄 수 있습니까?

Answer 1

문제는 기본적으로 인라인으로 렌더링되는 span입니다. 당신이 display:block를 사용하는 경우, Z- 인덱스가 사용됩니다 :

.mini_bloc_image > span:first-of-type { 
display: block; 
position: absolute; 
z-index: 10; 
font-size: 1.1em; 
background-color: #ffffff; 
padding: 4px 5px 4px 5px; 
margin-top: 95px; 
} 

.mini_bloc_image > span:last-of-type { 
display: block; 
position: absolute; 
z-index: 10; 
color: #ffffff; 
font-size: 1.1em; 
font-family: 'Marck Script', cursive; 
margin-left: 30%; 
margin-top: 125px; 
} 

인라인 요소 및 위치에 대한 자세한 내용은 this article를 참조하십시오.