在li上添加叠加图像

Question

问题：悬停在列表项上时，我试图显示覆盖图。

我是 html 的新手，我正在尝试在list item悬停上添加除法叠加层。但是，当我只希望list item作为灰色的类header出现在屏幕的整个宽度上时，覆盖层会显示在屏幕的整个宽度上。 我只希望红色叠加部分显示在灰色list item上。

这是我的代码：

.* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F9423A;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.price:hover {
    /*box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)*/
    background-color: #002A3A;
}


.price:hover .overlay {
    height: 20%;
}

.price .header {
    background-color: #ccd4d7;
    color: #002A3A;
    align-content: center; 
    font-size: 25px;
    height: 100%;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

<div class="columns">
<ul class="price">
<li class="header"> li One 
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li One description
</div>
</div>
</li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header"> li One 
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li two description
</div>
</div>
</li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header"> li three
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li three description
</div>
</div>
</li>
</ul>
</div>

有人知道怎么做吗？

谢谢

Answer 1

将position: relative添加到.price .header。添加position: relative会使具有position: absolute的孩子相对于父母定位自己。否则，任何带有position: absolute的元素都会相对于窗口对象定位自己。