Question

我的#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;

Answer 1

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

大多数网络开发人员从未读过z-index的文档，因为它是一个前沿概念，因此他们最终发现自己处于这个位置。您可以阅读有关here

的更多信息

对于想要向前堆叠元素的解决方案，如果您愿意使用它，那么我建议您保持堆叠顺序到变换。您可以通过以下方式为iPad做到这一点：

-webkit-transform:translateZ(10px);

Answer 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);

}

z-index无法在iPad上运行

2 个答案: