Текст поверх изображения в Internet Explorer - PullRequest
Новая
       5

Текст поверх изображения в Internet Explorer

1 голос
/ 13 января 2012

У меня в настоящее время проблема с моим z-индексом в IE.

У меня есть div, изображение в этом div и некоторый текст поверх этого изображения.

Вот мой HTML-код: 

<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: 

#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;
}

То есть, я не понимаю, что мой текст должен быть над изображением ...

Я нашел некоторые решения, подобные http://www.adrenatie.com/z-index-et-ie6/ или http://systembash.com/content/css-z-index-internet-explorer/, но он не работает.

Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

2 голосов
/ 13 января 2012

Проблема в том, что вы имеете дело с span s, которые по умолчанию отображаются как встроенные. Если вы используете display:block, будет использоваться z-index: 

.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;
}

Подробнее о встроенных элементах и ​​позиционировании см. в этой статье .

...