Today is my first time seeking help on StackOverflow:
I'm encountering an issue with my website where the floating arrow at the bottom of the page is obstructing my ability to click on buttons. Whether it's a Bootstrap button or HTML button, none of them seem to be responsive when the arrow is present.
I've attempted using z-index: 999;, but unfortunately, that hasn't solved the problem.
Below is the code snippet for reference:
View fiddle here: https://jsfiddle.net/52oo249q/
HTML & CSS
* {
margin: 0px;
}
body {
background-color: #CCC;
}
i {
border: solid #111111;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
width: 20px;
height: 20px;
}
...
...
<button type="button" style="z-index:999999999;" onclick="alert('Hello world!')">Click Me!</button>
</div>
</div>
</div>
</div>
<div class="down bounce arrow-center">
<div class="arrow">
<i class="down"></i>
</div>
</div>
</div>