如何使框阴影显示在容器中的下一个元素上? [英] How can I make box shadow show over the next element in a container?

问题描述

请参见以下代码: http://codepen.io/Varin/pen/kkGgVd

    <div class="container">
      <div class="outside2">
        <div class="inside2">
          <span class="text"></span>
        </div>
      </div>
      <div class="outside2">
        <div class="inside2">
          <span class="text"></span>
        </div>
      </div>
      <div class="outside2">
        <div class="inside2">
          <span class="text"></span>
        </div>
      </div>
    </div>

和CSS

$color1 : rgba(123,223,12,0.66);
$color2 : rgba(23,43,122,0.66);

body {
  box-sizing: border-box;
  background-color: #222222;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  //height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
}

.container {
  display:flex;
}

.text:after {
  content: 'Some info about the product and features, the history of the company lorem ipsum and so on.';
}
.outside2 {
  margin: 10px;
  box-sizing: border-box;
  padding: 10px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url(https://image.freepik.com/free-vector/wavy-letter-v-logo-in-abstract-style_1017-1976.jpg);
  background-position: center center;
  background-size: cover;
  height: 200px;
  width: 200px;
  border: solid 0px rgba(0,0,0,0.4);
  transition-duration: 0.5s;
  &:hover {
    box-shadow: inset 0px 0px 101px 100px $color1, 0px 0px 201px 56px $color1;
    .text {
      opacity:1;
      transition-delay: 0.2s;
    }
  }
  .text {
    color: #fff;
    opacity:0;
    transition-duration: 0.5s;
    transition-delay: 0.1s; 
  }
}

在悬停时同时显示两种类型的框阴影的最后一行中，第一个元素的阴影在第二个元素下方.在第2个元素上方仅显示第3个元素的阴影.

In the last row where both types of box shadow are displayed on hover, 1st elements' shadow is under the second element. Only the 3rd elements' shadow shows over the 2nd element.

我猜我可以使用z-index，但是有没有办法确保所有盒形阴影始终位于其他所有东西之上?这与flexbox有关吗?

I could play with z-index I guess, but is there a way to make sure that all box-shadows are always on top of everything else? Is this something to do with flexbox?

推荐答案

只需将鼠标悬停添加到您的代码块 position:relative ，并为他提供最大的z-index. JsFiddle链接

Just add to your block position: relative on hover and give him biggest z-index. JsFiddle link

这篇关于如何使框阴影显示在容器中的下一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！