Поместите значок в начало справа от абсолютно позиционированного изображения

Question

Я видел много похожих вопросов и ответов, но ничего такого, что я пытаюсь достичь.

Вот мой HTML:

<div class="container"> 
    <div class="inner"> 

    <div class="image-container"> 
     <img src="http://fpoimg.com/600x300" alt=""/> 
     <a href="" class="close-link">x</a> 
    </div> 

    <div>image name</div> 
    <div>id: 123456</div> 
</div> 

и CSS:

* { 
    font-family: sans-serif; 
    } 
    .container { 
    position: relative; 
    border: 1px solid; 
    width: 500px; 
    height: 500px; 

    } 

    img { 
    max-height: 100%; 
     max-width: 100%; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     margin: auto; 
    } 

    .close-btn { 
    position: absolute; 
    background: red; 
    padding: 4px 8px; 
    border-radius: 50%; 
    color:white; 
    text-decoration: none; 
    } 

Смотрите jsfiddle здесь - https://jsfiddle.net/61afw70q/10/

Что мне нужно сделать, это место красный крест в верхнем правом углу ИЗОБРАЖЕНИЯ. Примечание. Я не хочу размещать его в правом верхнем углу контейнера. Я хочу это для изображения. Каждое изображение будет отличаться по размеру. Центры изображений внутри контейнера.

Это очень урезанная версия всей моей страницы.

Answer 1

Вам не нужен раздел inner ... у вас есть изображение в контейнере, поэтому нет необходимости позиционировать изображение.

* { 
 
    font-family: sans-serif; 
 
} 
 
.container { 
 
    position: relative; 
 
    border: 1px solid; 
 
    width: 500px; 
 
    display: flex; 
 
    padding: 15px; 
 
    flex-direction: column; 
 
} 
 
.image-container { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
img { 
 
    max-height: 100%; 
 
    width: 100%; 
 
} 
 
.close-btn { 
 
    position: absolute; 
 
    background: red; 
 
    top: 4px; 
 
    right: 4px; 
 
    padding: 4px 8px; 
 
    border-radius: 50%; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
a.close-link { 
 
    position: absolute; 
 
    background: red; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    text-align: center; 
 
    line-height: 1.5em; 
 
    border-radius: 50%; 
 
    color: white; 
 
    text-decoration: none; 
 
    top: 4px; 
 
    right: 4px; 
 
}

<div class="container"> 
 

 
    <div class="image-container"> 
 
    <img src="http://fpoimg.com/600x300" alt="" /> 
 
    <a href="" class="close-link">x</a> 
 
    </div> 
 

 

 
    <div>image name</div> 
 
    <div>id: 123456</div> 
 
</div>