HTML/CSS 元素位置

Question

我想知道如何将这个戒指放在完全相同的位置？我的意思是当我调整窗口大小时它不会停留在同一个地方。我知道我不应该像在这里那样使用 top 或 left，但我只是不知道在这里使用什么。

.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

如果您添加相对于容器的位置，则绝对定位会引用容器的高度和大小。

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

这是 fiddle :

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