状态为活动时出现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;。告诉我这是否有作用。