javascript - 使用 css/javascript 在页面中所有图像的右上角动态放置一个按钮/div

Question

我需要在网页中的每个图像上放置一个关闭按钮。我无法将图像正确放置在图像的右上角。

function init_close_button(){
	var trc=document.getElementsByClassName('top_right_corner');
	for(var i=0;i<trc.length;i++){
		trc[i].onclick=function(e){
			e.target.parentNode.remove();
		}
	}
}

function loadtest(){
var a=document.createElement('div');
a.innerHTML="WindowLoaded";
document.body.appendChild(a);
}
window.onload=function(){
loadtest();
init_close_button();
}

.content {
    position: relative;
    width:'33%';
    
}
.content .top_right_corner {
    position: absolute;
    top:0px;
    right: 0px;
}
.top_right_corner{
  border:solid 1px blue;
  cursor:pointer;
}
.content:hover .top_right_corner{
  border:solid 1px red;
}
img{
  border:solid 2px yellow;
}

<span class="content">
    <div class="top_right_corner">click to close</div>
    <img width="150" height="150"/>
</span>
<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">delete</div>
</span>
<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">close this</div>
</span>

<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">close this</div>
</span>

我在隐藏/删除图像方面没有问题。我需要一些帮助来将关闭按钮/文本放在图像的一 Angular 。

Answer 1

更改.content 和.content .top_right_corner 的CSS。绝对定位仅适用于(内联) block 容器。

.content {
  position: relative;
  width: 33%;
  display: inline-block;
}
.content .top_right_corner {
  position: absolute;
  top: 5px;
  right: 52px;
}