在元素

Question

我的图片显示在元素标记之外，如下所示：

请注意，图像本身位于元素之外。尝试使用背景图像和IMG标记。结果相同。

HTML和CSS结构：

.class {
    width: 35px;
    height: 35px;
    position: absolute;
    background: #FFFFFF;
    margin-left: 310px;
    border: 1px solid #E6E6E6;
    border-radius: 50%;
    margin-top: 5px;
    
}

.rounded {
    border-radius: 100%;
 }
.class2 {
    height: 25px;
    z-index: 100;
    position: absolute;
    width: 25px;
    right: 0;
    background-size: 25px 25px !Important;
    background-color: black !important;
}

<div class="class">
    <div class="class2 rounded" style="background: url('<image fetched with php code here>')" ></div>
</div>

代码上方附带的图像中的蓝色方块是检查员突出显示而不是代码/结构的一部分。

e实际问题：看蓝色元素荧光笔。这是图像已分配给的元素。注意图像如何在顶部和左侧粘贴几个像素。为什么它在元素之外？

我尝试display: flex;正如现在删除的帖子中提到的那样，但没有修复它。

Answer 1

只需改变位置：绝对在.class（父级）到position:relative - 这样就可以了。像这样：

.class {
    width: 35px;
    height: 35px;
    position: relative;
    background: #FFFFFF;
    margin-left: 310px;
    border: 1px solid #E6E6E6;
    border-radius: 50%;
    margin-top: 5px;

}

后来添加： 我现在看到了。这种行为绝对正常，因为它们是sqares。 从.class2中删除半径以进行测试和缩放，您将看到它发生的原因。

只需调整class2的位置即可添加，这样就可以了。     右：2px;     顶部：2px;

Answer 2

如果你设置：

top: 0;
left: 0;
right: 0;
bottom: 0;

这将使元素可以通过边距调整 然后你可以添加：

margin: auto;

它将显示图像居中。

.class {
  width: 35px;
  height: 35px;
  position: absolute;
  background: #FFFFFF;
  margin-left: 310px;
  border: 1px solid #E6E6E6;
  border-radius: 50%;
  margin-top: 5px;
}
.rounded {
  border-radius: 100%;
}
.class2 {
  height: 25px;
  z-index: 100;
  position: absolute;
  width: 25px;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background-size: 30px 30px;*/
}

<div class="class">
  <div class="class2 rounded" style="background: url('http://www.lorempixel.com/100/100/"></div>
</div>