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

Question

所以我想要一个小图标放在图像的左上角，但是当我写top：0和left：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

您应该将图像&图标添加到将位置属性设置为relative的容器中。

的图标然后可以被定位在该绝对容器

.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; 
 
}

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

内部

Answer 2

使div的扭曲图像和图标与position: relative;并把图标&图像就可以了。