絶対配置された画像の右上にアイコンを配置

Question

多くの同様の質問と回答を見ましたが、達成しようとしているものと同じものは何もありません。 https://jsfiddle.net/61afw70q/10/

場所は赤い十字私は何をする必要がある -

* { 
    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を参照してください：

<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：ここ

は私のHTMLですIMAGEの右上にあるボタンをクリックします。注 - 私はそれをコンテナの右上に置いてはいけません。私はイメージのためにそれをしたい。すべての画像はサイズが異なります。コンテナ内の画像中心。

これは私のページ全体を大幅に削除したものです。

Answer 1

あなたは実際にはinner divを必要としません。コンテナ内に画像があり、画像を配置する必要はありません。

* { 
 
    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>