проблема с z-index.

[Lecho]

Вообще я в верстки начинающий и учусь по средствам проб и ошибок. В общем хочу сделать картинку (вызываемая через php) и поверх 2 картинки (через css).

 

Собственно код php:

<?php if($current_options['service_image_one']) { ?>

<div class="service-box_1">

<div class="service-box">

<img class="img-responsive service-box-image" alt="Sleek & Beautiful" src="<?php echo esc_url($current_options['service_image_one']); ?>">

</div>

</div>

<?php } ?>

 

Тут идет прикрепление фоновой картинки через CMS и оно работает. Я лишь добавил <div class="service-box_1"> как родительскую и в css прикрепил к ней 2 картинки. Хочу что бы они были поверх той что подгружается через php

 

И код в CSS:

 

.service-box {

    display: block;

    transition: all 300ms ease-out 0s;

margin-bottom: -120px;

position: relative;

z-index: 0;

}

.service-box img {

border: 2px solid #FFFFFF;

    border-radius: 100%;

    margin: 0 auto 16px;

    transition: all 600ms ease-out 0s;

width: 200px;

height: 200px;

}

.service-box1 img {

    border: 2px solid #00c2a9;

    border-radius: 100%;

    height: 125px;

    margin: 0 auto 16px;

    transition: all 600ms ease-out 0s;

    width: 125px;

}

.service-box_1 {

background-image: url(./images/1.png), url(./images/2.png);

background-position: 82.5px 0px, 180.5px 0px;

background-repeat: no-repeat;

    margin-bottom: -120px;

    position: relative;

    z-index: 1;

}

 

Собственно помогите с вопросом, почему та картинка что подгружается через php код становится на первый план, при условии что я поставил на это div z-index:0, а те 2 картинки что я хочу видеть с z-index:1 все равно в не видимости. 

 

Заранее спасибо

Edited October 25, 2015 by Lecho

[psywalker]

Научитесь оформлять посты, пожалуйста.

[rus]

Научитесь оформлять посты, пожалуйста.

+ выкладывайте код на http://jsfiddle.net/

[wwt]

.service-box1 img {

как минимум опечатка в имени класса