CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3352437
user3352437

Reputation:

Layer is not being display even though it was assigned high z-index

I am facing an issue with a div not being displayed when it is toggled from display: none; to display: block;

HTML: 

<div class="menus-container" style="display: block; top: 50px; height: 277px;">
.. some pretent content, which shows up in another place on the website ...
</div>

Which is toggled by js by a plugin JS which is minified so I cannot list the js, but I see in the developer toolbar that the style changes work.

I see that it has a height, I see that it has a width and a z-index of about 99999.To be sure I assigned in the developer tool bars all parent elements as well an z-index: 999 !important;

Still that div wont show up... any ideas? If you want to look at the example follow this link (redacted) - it only happens at a width of less than 850px.

Upvotes: 0

Views: 60

Answers (1)

Mike Willis
Mike Willis

Reputation: 1508

The problem here isn't a z-index issue, it's that the menu is appearing outside of its parent, the header element, which has overflow set to hidden. Setting the overflow to visible reveals the menu. You'll want to do some other things too, like give the menu a solid background color so it's easier to read.

<header class="main-header collapsed-gallery-page-menu" style="overflow: visible;">

Upvotes: 2

Related Questions