当我有 3 div 时，顶部边框未显示在中间 div

Question

我正在使用 html、css、bootstrap 开发新项目。我有个问题。我制作了一个四周都有边框的盒子，当我将鼠标悬停在这个盒子上时，一个图像出现在盒子里面；默认情况下，盒子里面是白色的。当我复制该框代码并将其粘贴到第一个框下并再次执行时，它显示 3 div 这正是我想要的，但我有一个问题，我的中间框的顶部边框没有显示。我能做什么？？

这是我的一个盒子代码

<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>

这就是与这些框相关的所有 css

.po-relative {
    position: relative;
    border: .5px solid #cecece;
}

.po-absolute {
    background-color: white;
    height: 176px;
    width: 266px;
    position: absolute;
    bottom: 0;
    transition: 250ms ease-in-out;
}

.po-absolute:hover {
    background-color: black;
    opacity: 20%;
}

还有我 post 关于我的问题的图片

Answer 1

这里发生的事情是，你在一个绝对位置的盒子里设置了你的宽度和高度，这不影响父级的宽度和高度，结果被截断了。

我把width和height移到了相对位置，left,top,bottom设置在position absolute元素上

给你。

.po-relative {
    position: relative;
    border: .5px solid #cecece;
    height: 176px;
    width: 266px;
    margin: 10px auto;
}

.po-absolute {
    background-color: white;
    position: absolute;
    bottom: 0;
    top: 0 left:0 right:0 transition: 250ms ease-in-out;
}

.po-absolute:hover {
    background-color: black;
    opacity: 20%;
}

<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>
<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>
<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>

当我有 3 div 时，顶部边框未显示在中间 div

top border not showing in middle div when i have 3 divs

html

css

bootstrap-5