Problems with Z-index while browsing my page in mobile

Question

I have created a portfolio page for myself.

https://alonoparag.github.io/index.html#home

My problem is that when I check the page using Google Developers tools or with my android (samsung galaxy s4) device, the navbar's items are always behind the content of #home.

I tried tweaking the z index of the navbar items versus the home content, with no avail. When Checking the elements in the developer's tools I saw that both the navbar elements and the div z-index have changed, but it didn't affected the way that the elements are stacked.

I would appreciate help with this.

Cheers

here's my code

.topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
   z-index: 10000;
}

div.content {
   align-content: center;
   width: 85%;
   margin: auto;
   padding: 16px;
   z-index: 1;
}

Sensoray · Accepted Answer · 2018-03-14 15:53:36Z

3

You have to give a position for z-index to work. So if you add position:relative; z-index:10; to your header, it should work fine.

answered Mar 14, 2018 at 15:53

Sensoray

2,4502 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yvo Linssen · Accepted Answer · 2018-03-14 15:52:35Z

3

You have to specify a (static) position, for example.

position: relative;

or

position: fixed;

"z-index only effects elements that have a position value other than static (the default)." - https://css-tricks.com/almanac/properties/z/z-index/

answered Mar 14, 2018 at 15:52

Yvo Linssen

3432 silver badges11 bronze badges

1 Comment

Alon Parag Over a year ago

I tried using your solution, but it didn't seem to solve the problem, even when each element is given a position other than static, they still stack over the navbar items.

Cole Huffman · Accepted Answer · 2018-03-14 16:04:57Z

2

The one issue I found is that the parent #home container itself seems to be the one giving you grief. Here are some tweaks I made in the developer console on my end. I tested it on a full desktop view as well as shrunk it down in the mobile preview and it worked properly.

CSS:

#home {
   z-index: 1;
}

#myTopnav {
   z-index: 999;
}

In addition, make sure to establish a position value for your elements.

That should do the trick for you!

edited Mar 14, 2018 at 16:04

answered Mar 14, 2018 at 15:54

Cole Huffman

3002 silver badges12 bronze badges

1 Comment

Yvo Linssen Over a year ago

That's just because he's set a position to the #myTopnav element. Using your answer he can fall into the same trap again next time.

Collectives™ on Stack Overflow

Problems with Z-index while browsing my page in mobile

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related