HTML 元素不重叠

Question

我试图在图像的右上角重叠一个关闭按钮，并将整个组件包裹在一个 div 中，以便我可以使用 JS 更轻松地复制它。我的html结构如下(...是无关信息):

<div class="thumb-container">
    <div class="thumb">
        <div class="pic-container">
            <img class="pic" ... height="128">
            <button class="close-button">X</button>
        </div>
        <h1 class="title">Messenger: Facebook</h1>
    </div>
</div>

我的样式表是

.thumb-container {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  display: flex;
  flex-direction: column;
}

.pic-container {
  position: relative;
  z-index: 1;
}

.close-button {
  position: absolute;
  top: 0;
  z-index: 3;
}

通过搜索其他 stackoverflow 帖子，我发现两个定位元素和不同 z-index 的组合应该会产生我正在寻找的结果，但我却得到了这个(.thumb 元素是用 JS 复制的):

按钮没有覆盖在图像的右上角。

编辑:这是codepen:

https://codepen.io/jeanlucthumm/pen/GVRebe

Answer 1

需要调整您的 .pic 类，以便它用相对定位填充容器。然后你可以设置绝对定位的按钮，它看起来很好。

.thumb-container {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  display: flex;
  flex-direction: column;
}

.pic-container {
  position: relative;
  z-index: 1;
}

.pic {
  width: 100%;
  height: auto;
}

.close-button {
  position: absolute;  
  top: 5px;   
  right: 5px;
  z-index: 3;
}

<div class="thumb-container">
    <div class="thumb">
        <div class="pic-container">
            <img class="pic" src="https://via.placeholder.com/150">
            <button class="close-button">X</button>
        </div>
        <h1 class="title">Messenger: Facebook</h1>
    </div>
</div>