Question

我无法使用z-index让我的div与下一个div重叠。

此功能的主要用途是橙色框，其中包含橙色框左侧图片上人物的介绍。但是这个盒子不会与你看到的div重叠。

<div class="holder">
 <div class="member">
   <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
   <div class="content-member">
      <!-- <h3><?php the_field('name'); ?></h3>
      <span><?php the_field('function'); ?></span>
      <div class="skills"><?php the_field('skills'); ?></div> -->
   </div>

这是我的html（它自动循环，这就是为什么我所包含的图像上有多个。在这个例子中.holder和.member没有关闭，因为它不会让它适合或什么。

.member {
float:left;
position: relative;
top:194px;
cursor: pointer;
z-index:5;

.content-member {
  width: 100%;
  height: 270px;
  float: left;
  background-color: $c-orange;
  position: absolute;
  top: 5%;
  left:180px;
  display: none;
  z-index: 500;
}

img {
  height:40vh;
  width:auto;
  z-index: 0;
  position: relative;
}

&:hover {
  .content-member {
    display: block;
  }
}

这就是我现在正在使用的CSS。

我无法理解这一点..

Answer 1

尝试使用关键帧

＆＃13;

.main{
width:300px;
height:200px;
position:relative;
  z-index:1;
}
.overed-div{
  position:absolute;
  top:10px;
  left:310px;
  width:150px;
  height:200px;
  background:#ff8800;
  z-index:2;
  text-align:center;
  opacity:0;
  
}
.main img:hover+ .overed-div {
  animation-name: details;
  animation-duration: 1.5s; 
  opacity:1;
}
@keyframes details{
from{opacity:0;}
to{opacity:1;}
  
}

＆＃13;

<div class="main">
<img src="https://s-media-cache-ak0.pinimg.com/originals/82/ad/c6/82adc661b9a9b0d2cdaa9c61d29ae4a0.jpg" style="height:100%; width:100%;"/>
 <div class="overed-div"><h2>Nature</h2></div>
</div>

＆＃13;

<div>不会将img与z-index

1 个答案: