CODEWITHSUNDEEP
javascriptjqueryhtmlcss
smartkid
smartkid

Reputation: 1559

Dynamically place a button/div on the top right corner of all images in the page using css/javascript

I need to place a close button over each image in a web page. I can't place the image correctly over on the top right corner of the image. 

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>

I have no problem in hiding/removing the image. I need some help to place the close button/text on corner of the images.

Upvotes: 0

Views: 1420

Answers (2)

jafarbtech
jafarbtech

Reputation: 7015

use float:left; in the span and right:3px; top:3px; in the 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>

Upvotes: 0

Gerard
Gerard

Reputation: 15796

Change the CSS of .content and .content .top_right_corner. Absolute positioning works with (inline-)block containers only.

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

Upvotes: 1

Related Questions