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

Posted

技术标签:

【中文标题】CSS：z-index 不起作用，当我签入智能手机浏览器时【英文标题】：CSS: z-index doesn't work, when I check in smartphone browser 【发布时间】：2019-12-03 04:52:44 【问题描述】：

我对我的响应式网站有疑问。

我将我的项目部署到 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" ></dt>
                          <dd>bar</dd>
                        </dl>
                        <dl class="Category">
                          <dt><img src="./image/beer.png" ></dt>
                          <dd>pub</dd>
                        </dl>
                        <dl class="Category">
                          <dt><img src="./image/dj.png" ></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>

在智能手机上，它不起作用，但如果你从电脑上检查，它可以工作，所以我希望你能从智能手机上检查这个链接。

谢谢。

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

【问题讨论】：

当我在移动浏览器 chrome 中检查时。它工作正常。您正在测试哪个浏览器？ 我现在检查了 iOS 和 Android。当我从 iOS 谷歌浏览器检查时，它没有用。所以这个问题只发生在 iOS 中。 好吧。让我检查一下 iOS，因为当我检查 android chrome 时，它​​运行良好。 我没有 iPhone 来测试这个，但我会尝试给 .background-img 一个特定的 z-index（任何低于 .header2 的 z-index，但可能只有 0） .由于它是.header2 的兄弟，并且不是静态定位的，而是在DOM 中低于.header2，它可能会覆盖.header2。您还可以尝试为您的固定位置元素设置特定的top 或bottom 值，以确保它们不会以某种方式离开屏幕。即使它们是 100% 的宽度和高度，只需快速发送 top: 0 可能会有所帮助。 谢谢！我会努力的！ 【参考方案1】：

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

z-index 在 iOS 上的行为不同（无论浏览器如何）。即使您在 Z 轴上正确索引内容，它也不会在 iOS 设备上正确显示。

解决方法是，为容器 div 赋予比背景更高的 z-index。

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

【讨论】：

【参考方案2】：

这看起来可能是 iOS 的问题。

根据规范，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

【讨论】：

以上是关于CSS：z-index 不起作用，当我签入智能手机浏览器时的主要内容，如果未能解决你的问题，请参考以下文章

expo-location 在 ios 中不起作用，并且未在应用设置中显示位置权限

Android 自动填充服务在 Chrome 中不起作用

Github webhook 的 Jenkins 自动构建不起作用

Bootstrap 折叠按钮在智能手机上不起作用

$(this) 子元素 css 更改根本不起作用

vscode顺风css智能感知不起作用