When you hover on the product appears a brief description that should overlap all other blocks, but in practice it is not. Set the block position: absolute; and z-index: 999; Unfortunately, it does not work as it should, and the title of the next block covers the description. enter image description here

Closed due to the fact that off-topic participants Vadim Ovchinnikov , user192664, aleksandr barakin , user300000, 0xdb Oct 12 '18 at 9:50 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Vadim Ovchinnikov, Community spirit, aleksandr barakin, Let's say Pie, 0xdb
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Show the code? Perhaps the header has its z-index - IonDen
  • website burzhuyka.1gb.ua - Valery Perets
  • @ValeryPerets The mission of this site is a knowledge base. In order for this issue to be useful to the masses, it is necessary to bring the minimum reproducible code directly in the question. It is also meaningless to give a link to a third-party resource, since when you have already solved this problem, there will be no sense from the link. - Vadim Ovchinnikov

1 answer 1

$(document).ready(function() { $('.name__product').hover(function(e) { $('.blockInform').toggle(); }); }); 
 h2 { cursor: pointer; font-weight: bold; } .block__product { width: 200px; height: 200px; margin: 20px; border-radius: 10px; padding: 30px; } .container__block { display: flex; position: absolute; z-index: 1; } .blockInform { width: 400px; border-radius: 10px; border: 2px solid #ccc; display: none; position: absolute; z-index: 100; margin: 30px 0 0 200px; padding: 20px; background-color: #D8BFD8; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container__block"> <div class="jumbotron block__product"> <h2 class="name__product">Булерьян</h2> <p>от 7777 грн</p> <p><a class="btn btn-primary btn-lg" role="button">Заказать</a></p> </div> <div class="jumbotron block__product"> <h2 class="name__product2">Булерьян</h2> <p>от 7777 грн</p> <p><a class="btn btn-primary btn-lg" role="button">Заказать</a></p> </div> </div> <div class="jumbotron blockInform"> <h3>Описание</h3> <h4>Эта печь работает на дровах – топливе, которое всегда доступно. Кроме того, ее расход минимизирован за счет уникальной конструкции печи.</h4> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </body> </html>