画像の右上にクローズアイコンを設定します。

Question

私はangularjsを使用して画像のリストを持っています。私は各画像の右上隅にクローズアイコン画像を表示したいと思います。 CSSで私を助けてください、以下は画像を表示するためのコードです。

<div ng-repeat="file in imagefinaldata" style="display:inline;"> 
    <img height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}" class="imgResponsiveMax" alt=""/> 
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" /> 
</div> 

Answer 1

image parent divにクラスを追加し、CSSを実行します。下のスニペットを参照してください。

.img_wrp { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.close { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<div ng-repeat="file in imagefinaldata" class="img_wrp"> 
 
    <img height=200 width=250 src="https://wecision.com/images/wrc-1.png" class="imgResponsiveMax" alt="" /> 
 
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" /> 
 
</div>

Answer 2

この例の揺れのために親にクラスを追加し、それは

.img-container { 
 
    display: inline; 
 
    position: relative; 
 
} 
 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="img-container" ng-repeat="file in imagefinaldata"> 
 
    <img height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}" class="imgResponsiveMax" alt="" /> 
 
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" /> 
 
</div>

Answer 3

を動作するはずです、これを試してみてください。

<div ng-repeat="file in imagefinaldata" class="parent"> 
    <img height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}" class="imgResponsiveMax" alt=""/> 
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" /> 
</div> 

そして、あなたのスタイル缶私はこれが好きです：

.parent { 
    display: inline; 
    position: relative; 
    width: 100%; 
    height: auto; // Or your height 
} 
.parent img.close { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 21px; 
    width: 21px; 
} 

もちろん、あなたのニーズに合わせてこのスタイルを変更してください。正確なサイズを提供する例はありませんでした。

Answer 4

Switching the order of block elements with CSS

多分その助け

このリンクでlookeを取りますが、このCSSコードを使用するCSSの位置規則で

をそれを行うことができますしてください。

.imagefinaldata{position:relative;} 
.imagefinaldata .close{width:21px;height:21px;position:absolute;left:3px; top:3px;} 
.imagefinaldata img:first-child{margin-top:30px;} 

私はこのヘルプをホップします