使用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> 

隱藏/刪除圖像沒有問題。 我需要一些幫助，將關閉按鈕/文本放在圖像的一角。

Answer 1

更改.content和.content .top_right_corner的CSS。 絕對定位僅適用於（行內）塊容器。

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

Answer 2

使用float:left; 在span和right:3px; top:3px; right:3px; top:3px; 在div

 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; float:left; } .content .top_right_corner { position: absolute; top:3px; right:3px; } .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>