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-indexs的组合应产生我想要的结果，但是我得到了（.thumb元素与JS复制）：

该按钮未覆盖在图像的右上角。

编辑：这是代码库：

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>

Answer 2

您在图像容器上设置了position: relative：

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

您希望按钮与图像重叠，但是图像不会占据容器的整个宽度。

绝对放置的按钮相对于容器（上图中的阴影区域）而不是图像放置。

让图像与容器占据相同的空间，然后可以根据需要放置按钮。

revised codepen

Answer 3

将此CSS用于右侧的关闭按钮

.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;
      right:15px;
    }
    .pic{
      width:100%;
    }

HTML元素不重叠

3 个答案: