z-index 在 iPad 上不起作用

Posted 2023-03-12

【中文标题】z-index 在 iPad 上不起作用

【英文标题】：z-index not working on iPad

【发布时间】：2015-05-15 00:01:28

【问题描述】：

我的#navContainer 的 z-index 在桌面上运行良好，但在 iPad 上却不行，有什么解决方案吗？

这是我的项目http://www.lunacarpentry.com/peachietouch/index.html的链接

下面是我的#navContainer 的代码

width: 27%;
position: absolute;
z-index: 10;
top: 4.5em;
left: 36.55%;
padding-bottom: 14em;
-webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

【问题讨论】：

请将您的示例代码发布到 jsfiddle.com。

【参考方案1】：

这可能是 iPad 的 Safari 处理 z-index 的方式。简单地解释一下，z-index 并不像大多数 Web 开发人员认为的那样简单。

大多数网络开发人员从不阅读 z-index 的文档，因为它是一个狭隘的概念，因此他们最终发现自己处于这个位置。您将能够阅读更多关于 here

至于想要简单地向前堆叠元素的解决方案，如果您愿意使用它，那么我建议您将堆叠顺序保留在变换中。您将能够专门针对 iPad 执行此操作：

-webkit-transform:translateZ(10px);

【参考方案2】：

我找到了解决方案，我为与我的#navContainer 重叠的元素添加了一个负 z-index 值

HTML

              <div id='navContainer'>
                <img id='logo' src='img/peachie-touch-logo-min.png' alt='peachie touch logo'/>
                <ul>
                    <li id='home-button' value='home'><a href='#home'>Home</a></li>
                    <li id='about-button' value='about'><a href='#about'>About Us</a></li>
                    <li id='services-button' value='services'><a href='#services'>Services</a></li>
                    <li id='contact-button' value='contact'><a href='#contact'>Contact</a></li>
                </ul>
                <div id='navFooter'>
                    <p class='tradeMark'>Peachie Touch &copy;</p>
                    <ul>
                        <li><a href='#'>
                            <div id='facebookIcon'></div>
                            </a>
                        </li>
                        <li><a href='#'>
                            <div id='instagramIcon'></div>
                            </a>
                        </li>
                        <li><a href='#'>
                            <div id='pininterestIcon'></div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id='wrapper'>
                <div id='about' class='content'></div>
                <div id='services' class='content'></div>
                <div id='contact' class='content'></div>
                <div id='home' class='content'></div>
                <div id='currentPageContent' class='contentFromCurrentPage'></div>
            </div>

CSS

#navContainer 


width: 27%;
  position: absolute;
  z-index: 10;
  top: 4.5em;
  left: 36.55%;
  padding-bottom: 14em;
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out; 


#wrapper 
width:100%;
height: 0;
overflow-x: hidden;
z-index: -10;
position: absolute;
margin: 7em 0 0;
background-color: #fff;
transition: all 0.5s ease-in-out;
opacity: .9;

-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);