Сделать блок поверх другого [закрыт]

259

12 февраля 2019, 04:40

При наведении на товар появляется краткое описание которое должно перекрывать собой все остальные блоки, но на практике это не так. Задал блоку position: absolute; и z-index: 999; к сожалению не работает как должно и заголовок следующего блока перекрывает описание.

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>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите составить селектор похитрее

Надо чтобы было так:

199

javascript

Почему не выполняется скрипт? Новичок [закрыт]

Это мой первый урок javascriptHello выводится при открытии страницы, а скрипт не выполняется

187

javascript

слишком много return Promise javascript

каждая функция внутри функции send_cash_toClient содержит промис(return new Promise) и возвращает resolve, поэтому после каждой функцииthen((status), и я вызываю эту...

205

javascript

Как написать кастомный цикл

Как все знают, существуют циклы while, do while и for в JavaScriptСделать кастомные циклы можно с помощью других циклов

199