位置絕對元素是頁面的孩子，而不是位置相對元素

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;並把圖標&圖像就可以了。