<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position:relative;
z-index:1;
border: 1px solid red;
width:200px;
/*Enable this and it will block link*/
/*width:100%;*/
height:290px;
}
.container {
display: none;
width: 200px;
height:290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise | it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left:125px;
}
#div-2 a:hover {
background:red;
color:white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display:none;
}
#FLAG:target {
display:block;
font-size:48px;
color:red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href="#FLAG">This is a link</a>
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */