Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: z-index works on laptop but not on mobile

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default z-index works on laptop but not on mobile

    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?

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

    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 ...

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,440
    Thanks
    106
    Thanked 120 Times in 118 Posts

    Default

    That was a spammer trying to hide his advertising in a post.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

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

    Any thoughts on the issue, please?

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,401
    Thanks
    5
    Thanked 290 Times in 283 Posts

    Default

    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
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

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

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,401
    Thanks
    5
    Thanked 290 Times in 283 Posts

    Default

    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
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

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

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,401
    Thanks
    5
    Thanked 290 Times in 283 Posts

    Default

    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
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

    Put the css in the head, but doesn't solve the problem.
    Maybe there is somewhere else an overriding z-index in another div.

Similar Threads

  1. Are redirects to mobile site causing mobile menu to be inoperable?
    By James F Thoma in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-04-2018, 09:23 PM
  2. Replies: 1
    Last Post: 11-23-2013, 04:30 PM
  3. Mobile 2 Laptop
    By traq in forum Computer hardware and software
    Replies: 2
    Last Post: 07-04-2013, 04:05 PM
  4. Replies: 11
    Last Post: 06-01-2009, 12:12 AM
  5. Every page except index.html works in IE7...
    By paul8agrape in forum CSS
    Replies: 0
    Last Post: 01-22-2007, 04:34 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •