打开菜单时，覆盖菜单按钮消失

Question

当我将菜单按钮放入标题div并打开菜单时，关闭按钮消失。这在屏幕上叠加后发生。我试图用z-index解决这个问题，但没有任何改变。我只能在标题内关闭菜单时看到打开按钮。当按钮没有放在标题div中时，关闭菜单按钮显示。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

＆＃13;

@charset "UTF-8";

ul {
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
}
li {
	padding:0;
	margin:0;
}

/*styling open close button*/
.button {
	padding:10px;
	display:inline;
	position:fixed;
	right:50px;
	top:6px;
	z-index:999;
	font-size:30px;
}
.button a {
	text-decoration:none;
}

.btn-open:after {
	color:#071914;
	content:"\f0c9";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}

.btn-open:hover:after {
	color:#fafd23;
}
.btn-close:after {
	color:#071914;
	content:"\f00d";
	font-family:"FontAwesome";
	z-index:100;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}

.btn-close:hover:after {
	color: #fafd23;
}
/*overlay*/
.overlay {
	display:none;
	position:fixed;
	top:0;
	height:100%;
	width:100%;
	background:#FFF;
	overflow:auto;
	z-index:99;
}

/** SOCIAL ICON **/
.wrap {
	color:#f2f2f2;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}
.wrap ul.wrap-nav {
	border-bottom:1px solid #071914;
	text-transform:capitalize;
	padding:100px 0px 50px;
}
.wrap ul.wrap-nav li {
	font-size:1.7em;
	display:inline-block;
	vertical-align:top;
	width:24%;
	position:relative;
}
.wrap ul.wrap-nav li a {
	color:#071914;
	display:block;
	padding:8px 0;
	text-decoration:none;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}

.wrap-nav h1{
	color:#071914;
	font-family:'spinweradbold';
	text-transform:uppercase;
	letter-spacing:1px;
}

.wrap ul.wrap-nav ul {
	padding:20px 0;
}
.wrap ul.wrap-nav ul li {
	display:block;
	font-size:.7em;
	width:100%;
	color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
	color:#071914;
}
.wrap ul.wrap-nav ul li a:hover {
	color:#6dd7d7;
}

.social {
	font-size:25px;
	padding:20px;
}
.social p {
	margin:0;
	padding:20px 0 5px 0;
	line-height:30px;
	font-size:13px;
}

.social-icon {
	width:80px;
	height:50px;
	background:#071914;
	color:#fff;
	display:inline-block;
	margin:0 20px;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.social-icon:hover {
	background:#6dd7d7;
	color:#FFF;
}
.social-icon i {
	margin-top:12px;
}

.content {
	width:100%;
	margin-top:200px;
	font-size:20px;
	color#333;
	text-align: center;
}


@media screen and (max-width:48em) {
	.button{
		margin-top:15px;
		margin-right:-30px;	
	}
	
	.wrap ul.wrap-nav>li {
		width:100%;
		padding:20px 0;
		border-bottom:1px solid #6dd7d7;
	}
	.wrap ul.wrap-nav {
		padding:30px 0px 0px;
	}
	nav ul {
		opacity:0;
		visibility:hidden;
	}
	.social {
		color:#c1c1c1;
		font-size:25px;
		padding:15px 0;
	}
	.social-icon {
		width:100%;
		height:50px;
		background:#fff;
		color:#333;
		display:block;
		margin:5px 0;
	}
	
	.social p {
	margin:0;
	padding:20px 0 5px 0;
	line-height:30px;
	font-size:5px;
}

}

＆＃13;

<div class="header-section">
    <div class="logo">
        <a class="logo-img" href="#home"><img src="images/logo.png"></a>
    </div>
    
    <div class="button">
        <a class="btn-open" href="#current"></a>
    </div>
</div><!--end of header-->

    <div class="overlay">
        <div class="wrap">
            <ul class="wrap-nav">
                <li><h1>main</h1>
                <ul>
                    <li><a href="#home">Welcome</a></li>
                    <li><a href="#bio">Biography</a></li>
                    <li><a href="resume/n-co-resume-web.pdf" target="_blank">Contact Me</a></li>
                </ul>
                </li>
                <li><h1>web</h1>
                <ul>
                    <li><a href="#dig">Ad Designs</a></li>
                    <li><a href="#web">Web Design</a></li>
                    <li><a href="#mockups">Mockups</a></li>
                    <li><a href="#wire">Wireframes</a></li>
                </ul>
                </li>
                <li><h1>graphic</h1>
                <ul>
                    <li><a href="#logo">Logo Design</a></li>
                    <li><a href="#typography">Typography</a></li>
                    <li><a href="#color">Color Theory</a></li>
                </ul>
                </li>
                <li><h1>illustration</h1>
                <ul>
                    <li><a href="#ifa">Illustrations</a></li>
                </ul>
                </li>
            </ul>
            <div class="social">
                <a href="http://linkedin.com/in/natishacorona" target="_blank">
                <div class="social-icon">
                    <i class="fa fa-linkedin"></i>
                </div>
                </a>
                <a href="https://twitter.com/GAN_N" target="_blank">
                <div class="social-icon">
                    <i class="fa fa-twitter"></i>
                </div>
                </a>
                
            </div>
        </div>
    </div>
    </div><!--header-main-->

＆＃13;

＆＃13;

＆＃13;