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>

- Valdas S

---

https://jsfiddle.net/pfvgvyqj/ - linktoahref

我知道你刚刚标记了一个正确的答案，但如果你想要一个响应式的解决方案（宽度和高度），看看我的答案吧 ;) - jsadev.net

Answer 1

如果你在容器中添加相对定位，绝对定位会参考容器的高度和尺寸。

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

这是小提琴：

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

- osanger

Answer 2

.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>

- Sahil Dhir

Answer 3

这里有一个使用JavaScript的响应式解决方案。 您的GPS环将在每个地图大小上保持相同的位置。如果您想使用小于100％的地图，只需将地图的“宽度：100％”设置为任何您想要的宽度。高度将自动计算。

同时，也支持使用事件监听器进行调整大小。

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>

如果你想编辑GPS-Ring的位置，请注意以下内容： map.offsetHeight * 0.3 + 'px' - 这里的0.3等于距离顶部的30% map.offsetWidth * 0.5 + 'px'; - 这里的0.5等于距离左侧的50%

这里还有一个示例：https://jsfiddle.net/fv2ocLyL/

- jsadev.net