I have a fixed button on my HTML site that redirects to another link. It appears correctly on most pages, but overlaps with the slider on my index page.
$(document).ready(function(){
// hide #back-top first
//$(".back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.back-top').fadeIn();
} else {
$('.back-top').fadeOut();
}
});
// scroll body to 0px on click
$('.back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="back-top floatright" style="display: none; z-index:1000;">
<button onClick="window.open('LINK','_blank')">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true">
<font size="4">
Send Enquiry
</font>
</i>
</button>Even after trying z-index: -1, the issue persisted.
If you require any additional information, please feel free to reach out. Thank you!