Question

我在windows mobile，我的搜索框

中的视频标签的z-index有问题

<div portal:substituteby='common/search::search'></div>

应该在视频上

                        <a th:if="${hrefCinemagraph}!='#'" th:href="${hrefCinemagraph}" th:target="${targetCinemagraph}" class="center">
                            <div>
                                <div class="navigation"></div>
                                <img the:src="@{${imageCinemagraph}}" alt="Ofertas de viajes" title="Ofertas de viajes"/>
                            </div>
                        </a>

但是在windows mobile中，如果我使用z-index属性，它就不可能看起来像那样，视频总是在顶部。

两个元素（div和一个href）在其css中都有绝对位置。

我已尝试在加载页面后使用jquery设置属性，但它也不起作用：

    setTimeout(
              function() 
              {
                    $(document).ready(function(){
                        $('#video').css("-webkit-transform-style","preserve-3d");
                        $('#video').css("z-index",1);
                        $('#video').css("position","absolute");
                        $('#buscador').css("position","absolute");
                        $('#buscador').css("z-index",1000000);
                        alert("video z index is " + $('#video').zIndex());
                        alert("buscador z index is " + $('#buscador').zIndex());
                    });
              }, 5000);

我的代码：

                <div class="gallery">
                    <section>
                        <div portal:substituteby='common/search::search'></div>
                        <a th:if="${hrefCinemagraph}!='#'" th:href="${hrefCinemagraph}" th:target="${targetCinemagraph}" class="center">
                            <div>
                                <div class="navigation"></div>
                                <img the:src="@{${imageCinemagraph}}" alt="Ofertas de viajes" title="Ofertas de viajes"/>
                            </div>
                        </a>
                        <div th:if="${hrefCinemagraph}=='#'" class="center">
                            <div class="navigation"></div>
                            <img the:src="@{${imageCinemagraph}}" alt="Ofertas de viajes" title="Ofertas de viajes" />
                        </div>
                        <div class="right"></div>
                    </section>
                </div>

我花了一整天的时间来修复它。

Answer 1

经过这么多次的努力，我们最终决定在移动设备中隐藏视频标签，以防止视频标签和Windows手机中的z-index出现问题。

ZIndex Windows Mobile

1 个答案: