Question

所以我想在图像的左上角放置一个小图标，但是当我写上：0和左：0时，图标放在整个页面的左上角，所以我必须滚动一路看到它。

这是图片的CSS：

.attimage {
  width: 50%;
  border-radius: 5%;
  float: left;
  margin-right: .5em;
  position: relative;
}

这是图标的CSS：

.location-icon {
  width: 15px;
  left: 0px;
  top: 0px;
  position: absolute;
}

Answer 1

使用position: relative;对图像和图标进行扭曲，并将图标和图标放在一起图像就可以了。

Answer 2

你应该添加图像＆amp;容器中的图标，其position属性设置为relative。

然后可以将图标置于此容器内的绝对位置

＆＃13;

.image-container {
  position: relative;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  border: 1px solid green;
}

.image {
  position: relative;
  z-index: 5;
  border: 1px solid red;
}

＆＃13;

<div class="image-container">
  <img class="icon" src="http://via.placeholder.com/100x100">
  <img class="image" src="http://via.placeholder.com/500x500">
</div>

＆＃13;

Position绝对元素是页面的子元素，而不是位置相对元素

2 个答案: