我怎样才能绝对定位相关的image_tag？

Question

我是rails和javascript的新手，我有一个场地表，每个场地属于一个类型和一个区域。它们在索引页面上显示为部分，并且每个都在屏幕左侧的地图上有自己的图标。

我刚刚添加了一个新的mapicons表，它只是将使用paperclip上传的图像保存到我的应用程序中，因此每个venuetype都有一个不同的图标。这一切都很好但是当我包含新的mapicon时，我用来将地图上的图标放置的javascript会中断。

工作mapicon展示位置（_venue.html.erb）

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" class="venue_map_icon" style="position:absolute;"></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>

在地图上正确显示地图图标，但显示为我在css中设置的黑色星标。

损坏的mapicon展示位置（_venue.html.erb）

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script> 

显示我上传并分配给每个venuetype的正确地图，但它们位于其场地部分的右上角，而不是位于屏幕左侧的地图上。

希望我已经问过这个问题，需要澄清任何问题。感谢任何帮助，非常感谢！

修改

下面是我希望有所帮助的截图，第一个是目前的地图。场地部分显示为Tester1，Tester2等，名称左侧有一个大的彩色图标，名称下面的灰色字体是类型（类型1,2或3）。地图图标是左边的黑色星星，绝对是从各自的场地记录中获取的顶部和左侧值。

第二个屏幕截图是当我更改上面显示的代码时，部分显示相同，但​​是地图而不是黑色星星正确显示为较小的彩色方块，但未正确定位。他们坚持自己场地部分的右上角。

这就是我希望它显示为:(这是一个模拟的图像）

mapicons的CSS只是：

.venue_map_icon {
width: 19px;
height: 18px;
padding: none;
margin: none;
background-image:url(/images/mapicon.png);
border: none;
}

  .venue_map_icon:hover {
  background-image:url(/images/mapicon_hover.png);
  }

模型关系

场地

class Venue < ActiveRecord::Base
  belongs_to :venuetype
end

Venuetypes

class Venuetype < ActiveRecord::Base
  has_many :venues
  belongs_to :mapicon
  has_attached_file :icon,
    :styles => {
      :thumb=> "100x100>",
      :small  => "150x150>",
      :medium => "300x300>",
      :large =>   "400x400>" },
      :default_url => '/images/noimage.png'
end

Mapicons

class Mapicon < ActiveRecord::Base
  has_many :venuetypes
  has_attached_file :mapicon,
    :styles => { 
      :large => "640x480", 
      :medium => "300x300", 
      :thumb => "100x100", 
      :mapicon => "20x20" }
end

Answer 1

我没有看到你的元素的其他CSS，但请注意position: absolute对于位置不是默认类型的“最近的祖先”是绝对的static ）。

因此，在您的情况下，您可能想要

<div class="venue_partial">   

要position: relative，但不要设置top或left，以使其保持原样。如果你需要对不同的祖先做出绝对的，那么请改为使用相应的元素position: relative。

Answer 2

同样，没有看到你的CSS很难，但是我使用这段代码进行我自己的“自定义”定位，可以用不同的分辨率改变，甚至用onRefresh事件改变

function fixBox() {

    var child = document.getElementById('dropdown_child');
    var parent = document.getElementById('dropdown_parent');
    var curLeft = 0;
    if(parent.offsetParent) {
        do {
          curLeft += parent.offsetLeft;
        } while(parent = parent.offsetParent)

    }
    parent = document.getElementById('dropdown_parent');
    var w = child.offsetWidth - parent.offsetWidth;
    var x = curLeft - w;
    child.style.left = x;



}

自由修改以供自己使用，在这种特殊情况下，它会使子div与父div对齐。如果我理解正确，这应该有助于你的情况。

Answer 3

我发现了我的错误！

是什么：

<div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>

应该是：

<div id="venue_map_icon_<%= venue.id %>" style="position:absolute;" <%= image_tag (venue.venuetype.mapicon.mapicon.url(:mapicon)), :class => "venue_map_icon" %></div>