Блог

Главная - Вопросы по программированию - Как наложить тень с помощью bootstrap?

Как наложить тень с помощью bootstrap?

#html #css #twitter-bootstrap-3

#HTML #css #twitter-bootstrap-3

Вопрос:

Во-первых, я новичок в CSS и знаю только основы. Мне нужно добавить несколько карточек с правой стороны. И я сделал это, но, как вы можете видеть ниже, тень не накладывается на другие карты. Я нашел решение использовать absolute position, но мне нужно использовать bootstrap, чтобы он рекомбинировался на маленьком экране. На данный момент это мой макет: 

 .pm-tile {
    height: 100px;
    padding: 8px;
    background-color: rgb(238, 238, 238);
    border: 1px solid rgba(255, 255, 255, 0.30);
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.pm-tile:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  z-index: 3;
}  
 <div class="container">
  <div class="row">
    <div class="col-md-11"></div>
      <div class="col-md-1">
        <div class="row pm-tile">Test 1</div>
        <div class="row pm-tile">Test 2</div>
        <div class="row pm-tile">Test 3</div>
      <div class="row pm-tile">Test 4</div>
    </div>
  </div>
</div>

P. S. Как я могу сделать это, используя таблицу div начальной загрузки? Или это возможно только с absolute свойством position.

Ответ №1:

Если вы добавите в свой псевдокласс :hover псевдокласс position: relative;, то вы можете получить эффект, который вы ищете.

 .pm-tile {
    height: 100px;
    padding: 8px;
    background-color: rgb(238, 238, 238);
    border: 1px solid rgba(255, 255, 255, 0.30);
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.pm-tile:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  position:relative;
  z-index: 3;
}  
 <div class="container">
  <div class="row">
    <div class="col-md-11"></div>
      <div class="col-md-1">
        <div class="row pm-tile">Test 1</div>
        <div class="row pm-tile">Test 2</div>
        <div class="row pm-tile">Test 3</div>
      <div class="row pm-tile">Test 4</div>
    </div>
  </div>
</div>

Комментарии:

1. Это потому, что правило z-index работает, только если позиция абсолютная, относительная или фиксированная.

2. Я не знал. Спасибо за объяснение!