用于将元素放置在元素上的绝对位置的任何替代方法？

Question

这是为我拥有的每张图片创建的 HTML。

如您所见，votingContainer 类的图像和 div 都是 stickySpecificContainer 的子级。 stickySpecificContainer 是内联块，它采用其内容的宽度和高度，在这种情况下是图像。 votingContainer 使用 position: absolute 定位在其父级的左上角，在这种情况下是stickySpecificContainer。

现在这一切都很好而且花花公子，除了每个内联块都有默认的底部边距，比如我的stickySpecificContainer，这完全与我的布局有关。

    <div class="home-container-element">
        <div class="stickySpecificContainer">

            <img class='home-image' src='' alt='Random image'>

            <div class='votingContainer'>
                <a href='#' class='' id=''></a>
                <a href='#' class='' id=''></a>
            </div>

        </div>
    </div>

CSS

.home-container-element {
    text-align: center;
    position: relative;
    width: 100%;
    margin-bottom: 6px;
}
.home-image {
    position: relative;
    display: block;
    width: 100%;
    max-height: 800px;
    object-fit: cover;
}
.stickySpecificContainer {
    position: relative;
    z-index: 2;
    display: inline-block;
}
.votingContainer {
    position: absolute;
    top: 10px;
    left: 10px;
}

Answer 1

只需在您的主容器上将字体大小设置为 0

.home-container-element {
   font-size: 0;

并将其设置回您在投票容器中需要的内容

.votingContainer {
   font-size: 12px;

这将删除块之间的空白。

编辑： 能够查看页面后，发现问题在于主容器需要在响应式布局中调整其宽度。设置 inline-block 时，子容器的宽度不再是 100%，所以需要一起设置。为了删除内联块附带的底部边距，上述原始答案适用。