我需要在网页中的每个图像上放置一个关闭按钮。我无法将图像正确放置在图像的右上角。
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 。
最佳答案
更改.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;
}
关于javascript - 使用 css/javascript 在页面中所有图像的右上角动态放置一个按钮/div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44476908/