CSS：如何相对于居中的背景图像重新定位<divs> </divs>

Question

我目前有一个带有background图片的div，其中设置了background-position:center。 在这个div里面，我有一堆<a>个标签，里面有<img>个孩子。理想情况下，我希望这些<a>标记与居中的背景图像建立精确的关系。目前，它们的位置设置为relative，仅保持与一个特定视口宽度的背景图像的理想关系。有没有一种方法可以让元素与所需关系中的背景图像一起移动而不使用JS？

这是我的CSS和HTML

haml：

#map
  %a#saddleback_point
   =image_tag('saddleback_college.png', width:'300px')
  %a#citrus_point
    =image_tag('citrus_college.png', width:'300px')
  %a#sonrise_point
    =image_tag('sonrise.png', width:'300px')
  %a#vegas_point
    =image_tag('vegas.png', width:'300px')
  %a#tennessee_point
    =image_tag('tennessee.png', width:'300px')
  %a#chestnut_point
    =image_tag('chestnut.png', width:'300px')
  %a#saint_point
    =image_tag('saint.png', width:'300px')
  %a#boston_point
    =image_tag('boston.png', width:'300px')
  %a#fisher_point
   =image_tag('fisher.png', width:'300px')

CSS：

#map{
  margin-top:200px;
  background: url(image_path("vereinigte_staaten.png"));  
//  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  height: 650px;
  width:100%;
}

 #saddleback_point {
  //display:none;
  position:relative;
  font-size:30pt;
  top:200px;
  bottom:0px;
  left:300px;
 }
 #citrus_point{
   top:112px;
   bottom:0px;
   left:45px;
   position:relative;
 }

 #chestnut_point{
   top:220px;
   bottom:0px;
   left:-290px;
   position:relative;
 }

 #vegas_point{
   top:385px;
   bottom:0px;
   left:-360px;
   position:relative;
 }

 #tennessee_point{
   top:405px;
   bottom:0px;
   left:-250px;
   position:relative;
 }
 #saint_point{
   top:-130px;
   bottom:0px;
   left:1260px;
   position:relative;
 }
#boston_point{
  top:-190px;
  bottom:0px;
  left:1010px;
 position:relative;
}
#fisher_point{
  top:-270px;
  bottom:0px;
  left:700px;
  position:relative;
}

#sonrise_point{
 top:395px;
 bottom:0px;
 left:-300px;
 position:relative;
}

Answer 1

将容器设置为position: relative，将内部元素设置为position: absolute。这将允许您精确地相对于容器定位它们。