HTML/CSS element position

Question

I would like to know how can I position this ring in exact same position? I mean when I resize window it does not stay in the same place. I understand that i should not use top or left like I did here but I just don't know what to use here.

.container{
  border-style: solid;
}

.gps_ring {

	border: 3px solid #363347;
 
	-webkit-border-radius: 32px;
	border-radius: 32px;
 
	height: 10px;
	width: 10px;
 
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
 
	animation: pulsate 1s ease-out;
	animation-iteration-count: infinite;
 
	opacity: 0.0;
	top: 30%;
	left: 50%;
	position: absolute;
}
 
/* webkit - safari, chrome */
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
/* no vendor prefix - firefox */
@keyframes pulsate {
0% { transform: scale(0.1, 0.1); opacity: 0.0; }
50% { opacity: 1.0; }
100% { transform: scale(1.2, 1.2); opacity: 0.0; }
}

<div class="container">
  <img src="http://www.pngmart.com/files/3/Australia-Map-Transparent-PNG.png">
  <div class="gps_ring"></div>
</div>

Answer 1

Here is a responsive solution using javascrpt. Your GPS-Ring still be on the same location on each mapsizes. If you want to use a smaller map then 100%, just set maps "width: 100%" to any width you want. the height will be calculated automatically.

resizing is also supported using the eventlistener.

window.addEventListener('resize',function(event){
		setGpsPosition();
});

function setGpsPosition(){
  var map = document.getElementById('map');
  var gps_ring = document.getElementById('gps_ring');

  map.style.height = map.offsetWidth / 1.4 + 'px';
  gps_ring.style.marginTop = map.offsetHeight * 0.3 + 'px';
  gps_ring.style.marginLeft = map.offsetWidth * 0.5 + 'px';
}
setGpsPosition();

.container{
  border-style: solid;
}
#map {
  background: url('http://www.pngmart.com/files/3/Australia-Map-Transparent-PNG.png') no-repeat;
  background-size: 100%;
  width: 100%;
}
#gps_ring {
	border: 3px solid #363347;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	height: 10px;
	width: 10px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
	animation: pulsate 1s ease-out;
	animation-iteration-count: infinite; 
	opacity: 0.0;
  position: absolute; 
}
 
/* webkit - safari, chrome */
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
/* no vendor prefix - firefox */
@keyframes pulsate {
0% { transform: scale(0.1, 0.1); opacity: 0.0; }
50% { opacity: 1.0; }
100% { transform: scale(1.2, 1.2); opacity: 0.0; }
}

<div class="container">
  <div id="map">
    <div id="gps_ring"></div>
  </div>
</div>

if you want to edit the position of your GPS-Ring note this:

map.offsetHeight * 0.3 + 'px' - the 0.3 is equal to 30% (from the top)

map.offsetWidth * 0.5 + 'px'; - the 0.5 is equal to 50% (from the left)

Here's a fiddle too: https://jsfiddle.net/fv2ocLyL/

Answer 2

If you add position relative to your container, the absolute positioning references the height and size of the container.

.container{
  position: relative;
  border-style: solid;
}

Here's the fiddle:

https://jsfiddle.net/3f9d629m/2/

Answer 3

.container{
  border-style: solid;
}

.gps_ring {

	border: 3px solid #363347;
 
	-webkit-border-radius: 32px;
	border-radius: 32px;
 
	height: 10px;
	width: 10px;
 
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
 
	animation: pulsate 1s ease-out;
	animation-iteration-count: infinite;
 
	opacity: 0.0;
	top: 5em;
	left: 19rem;
	position: absolute;
}
 
/* webkit - safari, chrome */
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
/* no vendor prefix - firefox */
@keyframes pulsate {
0% { transform: scale(0.1, 0.1); opacity: 0.0; }
50% { opacity: 1.0; }
100% { transform: scale(1.2, 1.2); opacity: 0.0; }
}

<div class="container">
  <img src="http://www.pngmart.com/files/3/Australia-Map-Transparent-PNG.png">
  <div class="gps_ring"></div>
</div>