2 изображения, которые будут отображаться при активном статусе

Question

У меня есть этот экран: Я хочу, чтобы экран выглядел как , поэтому мотоцикл также будет отображаться с красным флагом, когда статус активен
Код: HTML

                                                    <a class="" ng-class="{'myflicker':orderInfo.status==orderStat.order_status}">

                                                        <div class="logoMove" aria-hidden="true"></div>
                                                    </a>
                                                    <div class="map "></div>

                                                    <div class="triggerName">
                                                        {{orderStat.order_status_display}}
                                                    </div>
                                                </li>
                                            <div class="clearfix"></div>
                                            </ul>

                                    </div>

CSS:

.tracker .active a {
    background-image: url(../images/flag_red.png);
    background-repeat: no-repeat;
    border: 0px solid #A52A2A;

Изображение здесь:

.li.a.logoMove{
    background-image: url(../images/moto.png);

    background-repeat: no-repeat;
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    transition: all 2s;
}

Но изображение не отображается правильно.Почему это так?

Answer 1

Когда вы позиционируете что-то как абсолютное, вы должны дать ему z-index.Попробуйте дать изображение, которое вы хотите показать z-index: 1;.Скажи мне, если это что-то делает.