在百分比宽度元素上对齐 div 覆盖答案

【问题标题】：Aligning div overlay on percentage width element在百分比宽度元素上对齐 div 覆盖
【发布时间】：2017-09-28 21:31:11
【问题描述】：

我正在构建一个具有四列布局的“员工”页面。我放置了一个 div 元素，绝对定位在每个工作人员的照片之上，以充当按钮/链接。我的问题是，当我将此叠加 div 对齐到底部：0 和右侧：0 时，当我调整窗口大小时，图像和叠加层之间偶尔会出现 1 个像素的间隙。这似乎是某种舍入误差的函数。

我已经搜索了这个网站和其他网站以寻求这方面的帮助，但我没有发现任何地方明确讨论过这个问题。非常感谢任何见解。

有问题的页面可以在这里看到： communicationdesign.com/cwt-beta/about.html

调整窗口大小以查看偶尔出现的错误/间隙...

这里是相关的标记：

<div class="staff-block">
    <div class="staff-photo">
        <a href="gruber.html"><img src="img/gruber.jpg" class="portrait" /></a>
        <a href="gruber.html">
            <div class="plus-link">
                <div class="plus-sign">&#43;</div>
            </div>
        </a>
    </div>
    <div class="caption">
        <a href="gruber.html">Drew Gruber</a><br /><span class="job-title">Executive Director</span>
    </div>
</div>

这是 CSS：

.staff-block {
    position: relative;
    width: 22.3%;
    float: left;
    background-color: #ffc;
    margin-right: 3.5%;
}
.staff-photo{
    position: relative;
}
.staff-photo img, .board-photo img, .bio-photo img {
    width: 100%;
}
.portrait {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
.plus-link {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}
.plus-sign {
  background-color: rgba(255,204,78,0.8);
  color: white;
  font-size: 40px;
  line-height: 30px;
  padding: 4px 8px 6px;
}

【问题讨论】：

标签： css layout alignment overlay liquid

【解决方案1】：

这是使用百分比时的职业危害。你可以使用这样的技巧：

.staff-photo{
    overflow: hidden;
}

.plus-link {
  background-color: rgba(255,204,78,0.8); // color on the plus sign parent 
  position: absolute;
  bottom: -5px; // position it over the edge
  right: -5px;
  padding: 0 5px 5px 0; // and correct the extra space
}

.plus-sign {
  background-color: transparent; // or remove bg color
}

【讨论】：