I can not click on the link in the header. Even if with absolute positioning I put the z-index 9999 anyway, stupidly I can not click, as if I click on the picture. I do not even know what could be the problem.

$(window).scroll(function() { var st = $(this).scrollTop(); $('.header-img').css({ 'transform' : 'translate(0%, ' + st / 100 + '%' }); $('.get-start').css({ 'transform' : 'translate(0%, -' + st + '%' }); }); 
 .get-start{ width: 19%; padding: 15px 0 15px 0; display: inline-block; margin-left: 40%; background-color: var(--ThemeColor); text-decoration: none; color: var(--BgColor); font-size: 20px; border-radius: 5px; text-align: center; position: absolute; top: 70%; } .header-img-container{ top:-100px; z-index: -1; position: fixed; width: 100%; background-size: cover; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header-img-container"> <img class="header-img" src="<?php echo get_header_image(); ?>"> <a class="get-start" href="#">GET START WITH US</a> </div>

  • your example (if you run it) displays nothing - n.osennij

1 answer 1

img not closed, add / at the end and limit the size of the image (it turns out that the picture does not close the link, but stretches the container for it behind the screen and is not visible) and set the dimensions of the parent unit where you put the absolute, or on small screens so you will not see anything, it is better to use absolute in extreme cases therefore:

 $(window).scroll(function() { var st = $(this).scrollTop(); $('.header-img').css({ 'transform': 'translate(0%, ' + st / 100 + '%' }); $('.get-start').css({ 'transform': 'translate(0%, -' + st + '%' }); }); 
 .get-start { width: 19%; padding: 15px 0 15px 0; display: inline-block; margin-left: 40%; background-color: #eee; text-decoration: none; color: #999; font-size: 20px; border-radius: 5px; text-align: center; position: absolute; top: 70%; } .header-img-container { top: -100px; z-index: -1; position: fixed; width: 100%; background-size: cover; height: 400px; } .header-img { display: inline-block; max-width: 100%; max-height: 400px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header-img-container"> <img class="header-img" src="https://zelenyjmir.ru/wp-content/uploads/2017/06/Sibirskaya-koshka-51.jpg" /> <a class="get-start" href="#">GET START WITH US</a> </div>

  • one
    The img tag is one of the few that does not require a closing one (like <br>, for example). - Alexander Belinsky
  • yes, but there is no closing slash at the end <img src="URL" alt="альтернативный текст" /> , but you are right, in html5 it is not mandatory - kizoso
  • Previously, he was needed? Poor people, as they lived at all ... It's good that I did not have to endure these horrors) - Alexander Belinsky
  • You can survive another, post mailing - kizoso