Title: Transformicons - Icon hidden behind overlay
Tags: javascript;jquery;html;css
Question: I have been playing around with Zerodevx Transformicon where the Transformicons adds a class (tcon-transform) when the icon is transformed to the secondary version (in this case, the minus).
On clicking the "+" icon a open() function is called to open the overlay. On clicking the "-" icon, closeNav() function is called to close the overlay.
Once the overlay is opened, the "-" icon is disabled as it is behind the overlay.
See this code snippet for your reference as an example
function openNav() {
// if the element has the class tcon-transform (added/removed before calling this)
if (event.target.classList.contains("tcon-transform")) {
// the original icon was the plus: open the navigation
document.getElementById("myNav").style.left = "50%";
} else {
// the original icon was the minus: close the navigation
closeNav();
function closeNav() {
document.getElementById("myNav").style.left = "100%";
.overlay {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
left: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
overflow-x: hidden;
transition: 0.5s;
#transformicon {
float: right;
<head&gt;
<!-- Import webcomponents-lite.js polyfill --&gt;
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"&gt;</script&gt;
<!-- Import zero-transformicon build bundle --&gt;
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html"&gt;
</head&gt;
<body&gt;
<div id="transformicon"&gt;
<zero-transformicon icon="plus-minus" onclick="openNav()"&gt;
</zero-transformicon&gt;
</div&gt;
<div id="myNav" class="overlay"&gt;</div&gt;
</body&gt;
I was thinking about how to get around this problem. One way is probably add another icon inside the overlay with the same functionality of the icon outside the overlay. When the "+" is clicked, The overlay is opened with the "-" icon inside the overlay which calls the closeNav() function, the icon outside the overlay should be hidden so that only one icon is visible.
Once the overlay is closed, the transformicon should display the "+" sign again. Would love some thoughts on the best way to achieve this. Thank you.
Comment: Thank you so much @ecg8. It works! z-index property is a great tip.

Comment: add "position: relative" and "z-index: 2" to your #transformicon's CSS.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:12/28/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><css>', 'Title': 'Transformicons - Icon hidden behind overlay', 'ViewCount': 49, 'id': 53952988, 'user_AboutMe': None, 'user_AccountId': 13273793.0, 'user_DisplayName': 'Raj', 'user_Reputation': 13.0, 'user_Views': 8.0, 'user_id': 9583838.0}}