z-index works on laptop but not on mobile

**chechu** · 10-11-2022, 11:22 AM

Adding the following codes shows the navigation perfectly on laptop using the z-index:1, but shows behind content on mobile:

This is the css:

Code:

   .overlay {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 9999999999999; 
      left: 0;
      top: 0;
      background-color: #000;
      overflow-x: hidden;
      transition: 0.5s;
    }
    .overlay-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }
    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block; 
      transition: 0.3s; 
    }
    .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
    }
    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }
    .icon-bars:hover {
      cursor: pointer;
    }

Here is the html:

Code:

    <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    </div>
    </div>
    <span onclick="openNav()" class="icon-bars"><i class="fa fa-bars fa-2x"></i></span>

And the script at the bottom of the page:

Code:

<script>
    function openNav() {
    document.getElementById("myNav").style.width = "100%";
    }
    function closeNav() {
    document.getElementById("myNav").style.width = "0%";
    }
</script>

You can see it in action here Where am I going wrong, please?

**chechu** · 10-19-2022, 05:16 PM

Your answer is correct. but if you look at the code, then you'll see it is position:fixed.
If you need a reason to advertise your services, then please don't mention your company in a useless post, as it makes your company look pretty stupid to me ...

**james438** · 10-20-2022, 01:32 AM

That was a spammer trying to hide his advertising in a post.

**chechu** · 10-20-2022, 08:39 AM

That was obvious to everybody, James.
Just tried to be polite ...

Any thoughts on the issue, please?

**coothead** · 10-20-2022, 08:41 AM

Hi there checho,

perhaps z-index: 9999999999999; is the problem.

The maximum and minimum value for the z-index in most browsers is
limited to a signed 32-bit value i.e. from −2147483648 to +2147483647.

Source

What is maximum & minimum value for z-index property in CSS ?

coothead

**chechu** · 10-20-2022, 08:54 AM

Thanks, Coothead.
I tried first 1, then 99, then 999, etc, and none worked.

**coothead** · 10-20-2022, 09:06 AM

Hi there chechu.

as a matter of interest, which mobile device are you using for your test?

Perhaps it is one of the more obscure ones shown here...

https://caniuse.com/?search=z-index

coothead

**chechu** · 10-20-2022, 09:24 AM

I used iPhone 11 Pro Max and the Mac Chrome inspect tool.

**coothead** · 10-20-2022, 09:37 AM

Hi there chechu,

looking at your source code, I see that you have your
CSS in the body when it should be in the head

Could that cause a problem for your mobile?

coothead