CSS：当我检查智能手机浏览器时，z-index 不起作用

Question

我有一个关于我的响应式网站的问题。

我将我的项目部署到 Web 服务器。 在我的本地服务器和 PC 网络服务器中，我检查了 google chrome 开发工具，z-index 正常工作。 菜单栏从左侧滑到右侧。

但是当我从智能手机登录真实浏览器时，菜单栏没有出现。 背景颜色和字母颜色是不可见的。

当我点击每个标签时（标签是不可见的，但我猜到了每个位置。），我可以跳转到每个页面，例如结果页面、登录页面和主页。 所以我猜菜单栏在屏幕顶部。

问题是，

当我看到响应式网站时，菜单栏不会出现并且不可见。 但是菜单内的标签工作正常，所以我无法弄清楚这个问题是从哪里来的。

 .logo { line-height: 50px; float: left; text-transform: uppercase; color: #fff; } .header { height: 50px; background: #2D2524; padding: 0 20px; color: white; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; } .header2 { display: none; } .menu { float: right; line-height: 50px; } .menu a { color: #fff; text-transform: uppercase; text-decoration: none; padding: 0 10px; -webkit-transition: 0.4s; transition: 0.4s; } .background-img { background: url("../LPImages/karina-lago-wEucG_sLRsY-unsplash.jpg"); background-size: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; position: relative; height: 70vh; } .main_search { position: absolute; top: 70%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 70%; text-align: center; } .search_text { background: #232323; opacity: 0.9; padding-left: 10px; border: solid 3px #fff; font-size: 16px; line-height: 30px; width: 35%; height: 3rem; font-weight: 400; color: #fff; } .search_text:focus { outline: none; } .Genre { color: #fff; background: #232323; opacity: 0.9; border: solid 3px #fff; padding-left: 5px; font-size: 16px; line-height: 30px; width: 20%; height: 3.4rem; font-weight: 400; text-transform: uppercase; } .Genre:focus { outline: none; } .search_date { background: #232323; opacity: 0.8; margin-right: 15px; padding-left: 15px; color: #fff; border: solid 3px #fff; font-size: 16px; width: 20%; font-weight: 400; height: 3rem; } .search_date:focus { outline: none; } .search_icon { color: #fff; } .show-menu-btn, .hide-menu-btn { -webkit-transition: 0.4s; transition: 0.4s; font-size: 20px; cursor: pointer; display: none; } .show-menu-btn { float: right; } .show-menu-btn i { line-height: 50px; } .menu a:hover, .show-menu-btn:hover, .hide-menu-btn:hover { color: grey; } .paragrah { height: 50%; width: 30%; color: white; margin-left: 5em; margin-top: 7em; margin-bottom: 20em; font-size: 20px; background-color: rgba(0, 0, 0, 0.7); text-align: justify; } #chk { position: absolute; visibility: hidden; z-index: -1111; } /*.content { padding: o 20px; img { width: 100%; max-width: 700px; margin: 20px 0; } }*/ @media screen and (max-width: 800px) { .header { display: none; } .search { display: none; } .header2 { display: block; width: 100%; max-width: 100%; -webkit-box-shadow: none; box-shadow: none; position: fixed; height: 50px; background: #2D2524; overflow: hidden; z-index: 10; } .background-img { width: 100%; } .main { margin: 0 auto; display: block; height: 100%; margin-top: 60px; } .mainInner { display: table; height: 100%; width: 100%; text-align: center; } .mainInner div { display: table-cell; vertical-align: middle; font-size: 3em; font-weight: bold; letter-spacing: 1.25px; } #sidebarSearch { position: relative; height: 100%; left: 0; width: 100%; margin-top: 50px; -webkit-transform: translateX(1500px); transform: translateX(1500px); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; background: #000000; color: #fff; position: fixed; text-align: center; } .sidebarIconSearch i { color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: absolute; top: 16px; right: 25px; z-index: 99; font-size: 20px; } input[type="checkbox"]:checked ~ #sidebarSearch { -webkit-transform: translateX(0); transform: translateX(0); } input[type="checkbox"]:checked ~ #sidebarSearch ~ .sidebarIconToggle { display: none; } .openSidebarSearch { float: right; } .search-title { font-size: 20px; font-weight: bold; margin: 20px 0 10px; } .search_text { outline: none; height: 30px; width: 60%; border: solid 3px #fff; background: none; border-radius: 30px; color: #fff; padding: 0 20px; font-size: 16px; } .tag-list { color: #000000; margin: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 10px; } .tag-list li { background: #fff; border-radius: 30px; margin: 4px; height: 24px; width: 80px; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 12px; } .Category dt { background: #fff; width: 80px; height: 80px; border-radius: 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .Category dt img { width: 50px; height: 50px; } .Category dd { text-transform: uppercase; font-weight: bold; margin: 0 auto; } .Category-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .Day-box { outline: none; height: 30px; width: 200px; border: solid 3px #fff; background: none; border-radius: 30px; color: #fff; padding: 0 20px; font-size: 16px; } #sidebarMenu { position: relative; width: 100%; height: 100%; position: fixed; left: 0; margin-top: 50px; -webkit-transform: translateX(-1500px); transform: translateX(-1500px); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; background: #000000; } .sidebarMenuInner { position: absolute; text-align: center; top: 40%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); margin: 0; padding: 0; } .sidebarMenuInner li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 20px; padding: 30px; cursor: pointer; } .sidebarMenuInner li a { color: #fff; text-transform: uppercase; font-weight: bold; cursor: pointer; text-decoration: none; } input[type="checkbox"]:checked ~ #sidebarMenu { -webkit-transform: translateX(0); transform: translateX(0); } input[type="checkbox"]:checked ~ #sidebarMenu ~ .sidebarIconSearch { display: none; } input[type="checkbox"]:checked ~ #sidebarMenu ~ #sidebarSearch { display: none; } input[type=checkbox] { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .sidebarIconToggle { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 18px; left: 20px; height: 22px; width: 22px; } .spinner { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: #fff; } .horizontal { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } .diagonal.part-1 { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } .diagonal.part-2 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(135deg); transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-top: -9px; } } .image img { border: 1px solid white; } .event-name { font-size: 20px; color: white; } .heart { margin-top: -20px; margin-left: 17rem; } .event-date { font-size: 20px; color: #FD8700; } .card-info { color: white; font-size: 18px; } .save-mark { display: -webkit-box; display: -ms-flexbox; display: flex; } .button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 300px; margin-left: 120px; } .seemore-btn { margin-top: 4rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .seemore-btn a { color: white; border-radius: 30px; font-size: 24px; padding: 4px 20px 4px 20px; border: 0; cursor: pointer; text-decoration: none; background: #7206F7; } .category-container { margin-top: 8rem; } .category-card { padding: 0 50px 80px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .category-card p { text-transform: uppercase; margin-top: 20px; color: #ffffff; font-size: 35px; } .category-image { overflow: hidden; border-radius: 50%; width: 220px; height: 220px; border: solid #ffffff 1px; } .category-image img { width: 220px; height: 220px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: scale(1); transform: scale(1); } .category-image img:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } @media screen and (max-width: 800px) { .category-card { display: block; } .category-card-content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 70px; position: relative; } .category-card-content p { position: absolute; top: 43%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); font-size: 45px; } .category-image { margin: 0 auto; border: solid 1px #ffffff; } .category-image img { opacity: 0.7; } } .use_contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .use_contents img { margin-right: 7rem; width: 20%; } .Description { text-align: center; width: 30%; } .Description p { text-align: center; font-size: 19px; margin-top: 0.5rem; color: #c7c7c7; } .register-btn { margin-top: 4rem; } .register-btn a { background-color: #F70661; text-decoration: none; color: white; margin-top: 10px; border-radius: 30px; font-size: 24px; padding: 4px 20px 4px 20px; border: 0; cursor: pointer; } .find_func { margin: 1rem; } .use_contents2 img { margin-left: 7rem; margin-right: 0; } .start { margin: 4rem 0 10rem; text-align: center; } .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 0 auto; } @media screen and (max-width: 800px) { .use_contents { padding: 20px; } .use_contents img { margin-right: 1rem; width: 40%; } .use_contents2 { margin-left: 0; } .use_contents2 img { margin-right: 0; margin-left: 1rem; } .Description { width: 100%; } h4 { margin: 0; } } .login { background: url("../LPImages/danny-howe-bn-D2bCvpik-unsplash.jpg"); background-size: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; position: relative; height: 80vh; } .login-contents { background: rgba(0, 0, 0, 0.4); height: 80vh; width: 100%; text-align: center; } .login-base { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .login-base h2 { margin: 0; } .login-erea p { font-size: 18px; color: white; } .login-box { margin: 12px 0; padding: 0 20px; font-size: 12px; color: #fff; background: none; border-radius: 30px; height: 2.3em; width: 25em; outline: none; border: #fff solid 3px; } .login-link { margin-top: 2.5rem; } .login-link a { background-color: #0FCC41; color: white; margin-top: 10px; border-radius: 30px; font-size: 24px; padding: 4px 38px 4px 38px; border: 0; cursor: pointer; text-decoration: none; } .forgot { margin-top: 0.8rem; } .forgot a { font-size: 18px; color: white; text-decoration: none; border-bottom: 0.5px solid white; } .sns-icon-erea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 2rem 0 0.5rem; } .sns-icon { position: relative; height: 50px; width: 50px; border-radius: 50%; margin: 0 10px; cursor: pointer; } .sns-icon i { color: #fff; position: absolute; top: 50%; left: 52%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .footer { height: 50vh; width: 100%; background-color: #2D2524; } /*@import "./footer";*/ * { margin: 0; padding: 0; font-family: 'Josefin Sans', sans-serif; font-weight: 100; } body { background-color: black; } h2 { color: white; text-align: center; margin-bottom: 3rem; font-size: 38px; } h3 { color: white; font-size: 33px; } h4 { color: white; font-size: 23px; margin-top: 2rem; } .face { background: #305097; } .twi { background: #00aced; } .goo { background: #db4a39; } /*# sourceMappingURL=main.css.map */

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="../css/main.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="../css/swiper.css"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet"> <title>landing page</title> </head> <body> <div class="header"> <a href="#"><h1 class="logo">Dark Code</h1></a> <input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-bars" style="color: white;"></i> </label> <ul class="menu"> <div class="menu-list"> <a href="#">Register</a> <a href="#">Events</a> <a href="#">Login</a> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times" style="color: white;"></i> </label> </div> </ul> </div> <div class="header2"> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> <label for="openSidebarMenu" class="sidebarIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div id="sidebarMenu"> <ul class="sidebarMenuInner"> <li><a href="#" target="_blank">Home</a></li> <li><a href="#" target="_blank">Events</a></li> <li><a href="#" target="_blank">Profile</a></li> <li><a href="#" target="_blank">Log out</a></li> </ul> </div> <input type="checkbox" class="openSidebarSearch" id="openSidebarSearch"> <label for="openSidebarSearch" class="sidebarIconSearch"> <i class="fas fa-search search_icon"></i> </label> <div id="sidebarSearch"> <div class="search-erea"> <div class="search-title">Enter the name of event</div> <input type="text" class="search_text"> <div class="search-title">Choose tags</div> <ul class="tag-list"> <li>Tag</li> <li>Tag</li> <li>Tag</li> <li>Tag</li> </ul> <ul class="tag-list"> <li>Tag</li> <li>Tag</li> <li>Tag</li> <li>Tag</li> </ul> </div> <div class="search-erea"> <div class="search-title">Categorys</div> <div class="Category-list"> <dl class="Category"> <dt><img src="./image/martini.png" alt="bar-img"></dt> <dd>bar</dd> </dl> <dl class="Category"> <dt><img src="./image/beer.png" alt="pub-img"></dt> <dd>pub</dd> </dl> <dl class="Category"> <dt><img src="./image/dj.png" alt="club-img"></dt> <dd>club</dd> </dl> </div> </div> <div class="search-erea"> <div class="search-title">Day</div> <input type="text" class="Day-box"> </div> </div> </div> <div class="background-img"> <div class="main_search"> <div class="search_content"> <form action="#" class="search"> <input type="text" class="search_text" placeholder="Enter the key words !"> <select name="select" id="select" class="Genre"> <option value="" hidden">genre</option> <option value="1">bar</option> <option value="2">pub</option> <option value="3">club</option> </select> <input type="date" class="search_date"> <a href="#"><i class="fas fa-search search_icon"></i></a> </div> </div> </div> <script src="https://unpkg.com/swiper/js/swiper.js"></script> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script> <script src="./js/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'horizontal', slidesPerView: 4, spaceBetween: 10, centeredSlides : true, loop: true, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </body> </html>

从智能手机上，它不起作用，但是如果您从 PC 上检查，它会起作用，所以我希望您可以从智能手机上检查此链接。

谢谢你。

我检查了 iOS 和 Android chrome 浏览器。 而这个问题只发生在 iOS 中。 所以请用 iPhone 检查。

Answer 1

我也时常在 iOS 设备上遇到这个问题。

z-index 在 iOS 上的行为不同（无论浏览器如何）。 即使您在 Z 轴上正确索引了内容，它有时也会看起来不可见。

我通过在 z-index 比背景（或我想要的其他内容）更高的内容周围提供一个 div 来解决它，而不是我在 div 内索引内容。 所以内部内容永远不会落后于背景。 这也不会影响其他设备。

在你的情况下#sidebarMenu {z-index: 100;}应该可以工作。

Answer 2

这看起来可能是 iOS 和position: sticky 。

根据该规范，CSS属性z-index将只不是如果一个元素有默认的定位工作：

position: static

因此，为了确保z-index正常工作，以下任何一项都可以应用于元素（您已经在做）：

• position: relative
• position: absolute
• position: fixed
• position: sticky

---

进一步阅读：

position: static元素按照文档的正常流程进行定位。 top、right、bottom、left 和z-index 属性不起作用。 这是默认值。

来源： https : //developer.mozilla.org/en-US/docs/Web/CSS/position#values