Question

起初，Imma是CSS中的noobie并且只知道基础。我需要在右侧添加几张卡片。而且我做到了，但正如你在下面看到的那样，阴影不会覆盖另一张卡片。我找到了使用absolute位置的解决方案，但我需要使用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.如何使用bootstrap的div表创建它？或者只能使用absolute位置属性。

Answer 1

如果在你的：hover伪类中添加位置：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 个答案: