jquery - ZIndex Windows 移动版

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

在纠结了这么多次之后，我们最终决定在移动设备中隐藏 video 标签，以防止 video 标签和 windows phone 中的 z-index 出现问题。