ZIndex Windows 移动版答案

【问题标题】：ZIndex Windows MobileZIndex Windows 移动版
【发布时间】：2014-09-24 16:30:28
【问题描述】：

我的搜索框 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 和 a 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>

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

【问题讨论】：

标签： jquery html css html5-video z-index

【解决方案1】：

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

【讨论】：