Javascript 如何绝对定位相关的图像标签？

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

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

工作mapicon安置（_venture.html.erb）

模型关系

场地

class Venue < ActiveRecord::Base
  belongs_to :venuetype
end

上课地点

血型

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

class-Venuetype{
：thumb=>“100x100>”，
：small=>“150x150>”，
：中等=>“300x300>”，
：large=>“400x400>”}，
：default_url=>'/images/noimage.png'
结束

Mapicons

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

class Mapicon{
：大=>“640x480”，
：中等=>“300x300”，
：thumb=>“100x100”，
：mapicon=>“20x20”}
结束

我没有看到元素的其他CSS，但请注意，

位置：绝对

仅对位置不是默认类型（静态）的“最近祖先”是绝对的

因此，在您的情况下，您可能希望

<div class="venue_partial">   

---

要有

位置：相对

，但不要设置

顶部

或

左侧

，使其保持在原来的位置。如果您需要使它相对于不同的祖先是绝对的，那么请改为使用适当的元素

位置：相对的
。
我没有看到其他CSS用于您的元素，但是请注意
位置：绝对的
仅相对于位置不是默认类型的“最近的祖先”是绝对的（静态的
）

因此，在您的情况下，您可能希望

<div class="venue_partial">   



拥有
position:relative
，但不要设置
顶部或
左侧，使其保持原样。如果需要使其相对于不同的祖先是绝对的，则使用适当的元素
position:relative
。
同样，如果看不到您的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右对齐。如果我理解正确，这将有助于您的情况。
再次强调，没有看到您的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右对齐。如果我理解正确，这将有助于您的情况。
我发现了错误

什么是：

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


我发现了我的错误

什么是：

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


@動靜能量, 感谢您的关注，场馆部分浮动到左侧，仅堆积在屏幕右侧。场馆地图图标元素绝对定位，并从场馆数据库中获取顶部和左侧值（每条记录都有一个icontoppx和iconleftpx字段）将position:absolute添加到部分类只会导致它们彼此堆叠在一起@動靜能量, 感谢您的关注，场馆部分浮动到左侧，仅堆积在屏幕右侧。场馆地图图标元素绝对定位，并从场馆数据库中获取顶部和左侧值（每条记录都有一个icontoppx和iconleftpx字段）。将position:absolute添加到Vincement_partial类只会导致它们彼此堆叠在一起。感谢您的回答，我用几张图片编辑了我的问题，以显示我的意思，我认为这是代码更改中的一个错误，因为它在没有更改的情况下工作正常（使用css样式的mapicons）@Dave我想我在理解你的概念方面仍然有困难…更改代码的原因是什么？你能模拟一个屏幕截图，说明你的结果最终应该是什么样子吗？我已经添加了一个我希望它呈现的图像，更改代码的原因是允许每个venuetype都有一个唯一的mapicon，所以所有的条都有e一个玻璃或所有电影院的地图图标都可能有一个卷轴或其他的图标。我会在底部添加一个更好的关系描述。谢谢你的回答，我用几张图片编辑了我的问题，以显示我的意思，我认为这是我的代码更改中的一个错误，因为它在没有更改的情况下工作正常（使用css样式的mapicons）@Dave我想我在理解你的概念方面仍然有困难…更改代码的原因是什么？你能模拟一个屏幕截图，说明你的结果最终应该是什么样子吗？我已经添加了一个我希望它呈现的图像，更改代码的原因是允许每个venuetype都有一个唯一的mapicon，所以所有的条都有一个玻璃或所有电影院的地图图标都可能有一个卷轴或其他的图标。我会在底部添加一个更好的描述我的关系的图标。