php - 宽度属性不适用于绝对定位的 div

Question

我正在为我的一位画家 friend 开发网站。在他的主页上，我想做一个水平滚动的画廊，展示他最近的 5 件作品。此外，这个想法是，当一个人将鼠标悬停在他的每幅图像上时，他们会看到这幅画的名称和实际尺寸(例如，对于可能有兴趣出于购买目的联系他的人)。

无论如何，我设法制作了水平滚动的小画廊，这真的很简单，而且我似乎确实在制作悬停效果的正确道路上(我遵循了 this tutorial )，除了我的 div(保留图像和覆盖信息)不接受我分配给它的宽度。

这是我的 html 的样子(它实际上是 php，但 php 部分工作得很好):

<div class="imagem">
  <ul>
    <?php for ($i = 0; $i < 5; $i++) { ?>
      <li>
        <div class="img">
          <img src="static/css/images/exemplo1.jpg" style="height: 40vh;" />
          <div class="overlay">
            <p>Name of the Painting</p>
            <p>45cm x 37cm</p>
          </div>
        </div>
      </li>
    <?php } ?>
  </ul>
</div>

然后我这部分的 CSS 看起来像这样:

.container .imagem {
  /*background-color: rgba(41, 41, 41, 0.1);*/
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;

  padding: 30px 0;
  padding-bottom: 20px;

  width: 90%;

  overflow-x: scroll;
  overflow-y: hidden;

  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

  position: relative;
  left: 50%;
}

.container .imagem::-webkit-scrollbar {
  display: none;
}

.container .imagem ul {
  white-space: nowrap;
}

.container .imagem li {
  display: inline-block;
}

.container .imagem .img {
  display: inline-block;
}

.container .imagem .img .overlay {
  display: inline-block;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: all 0.5s;
  color: rgba(255, 255, 255, 0.5);


  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
}

.container .imagem .img:hover .overlay {
  height: 100%;
}

我也在使用 Bootstrap，这实际上是我使用它的第一个元素，所以我不确定我是否会遇到任何问题。

无论如何，这让我发疯了一段时间。我对 HTML5 或 php 不是很有经验，所以我把这个元素作为了解它并获得更多实用知识的一种方式，不过，我从来没有遇到过这样的问题。叠加 div 要么是我创建的小画廊大小的 100%，要么就是 p 标签中文本的精确宽度。

我尝试了很多东西，比如更改显示，将宽度设置为继承、自动、100%，根本不放入，在 HTML 中编码(看看我是否可以覆盖任何我没有的东西意识到在那里)但没有任何效果，我描述的两个宽度始终是我唯一得到的宽度。

https://jsfiddle.net/uw0cz2yk/

Answer 1

我不认为 position: absolute;将在父元素没有设置位置的情况下处理子元素。尝试在 .overlay 的父级上设置 position: relative，在本例中它是您的 .img 类。