我怎樣才能絕對定位一個相關的image_tag？

Question

我對軌道和JavaScript超級新手，我有一個場地表，每個屬於一個類型和一個區域。它們在索引頁面上顯示爲部分，並且在屏幕左側的地圖上也各有一個圖標。

我剛剛添加了一張mapicons表格，它只是將使用回形針上傳的圖像保存到我的應用程序中，因此每個venuetype都有一個不同的圖標。這一切都工作正常，但是我使用的JavaScript來放置地圖上的圖標時，我包括新的mapicon圖標。

工作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，但他們被定位在其場地的右上角部分，而不是正確的mapicons在屏幕左側的地圖上。

希望我已經問過這個問題，需要澄清任何問題。感謝任何幫助，非常感謝！

編輯

繼承人一對夫婦截圖的，我希望會有所幫助，首先是mapicons如何目前。場地部分顯示爲Tester1，Tester2等，名稱左側有一個大的彩色圖標，名稱下方的灰色字體是類型（類型1,2或3）。而地圖上的圖標是左邊的黑色星星，它們的絕對頂部和左側值都是從各自的場地記錄中獲得的。

第二截圖是當我改變代碼如上所示，該分音顯示相同的，但mapicons而不是被黑星正確地顯示爲較小的顏色的方塊，但不正確的定位。他們堅持自己場地部分的右上角。

這是我希望它作爲顯示的內容：（這是一個嘲弄圖像）

的CSS的mapicons就是：

.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

我發現我的錯誤！

是什麼：

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

Answer 2

我沒有看到其他的CSS爲你的元素，但要注意position: absolute只有絕對相對於「最近祖先「，其位置不是默認類型（static）。

所以，你的情況，你可能想使

<div class="venue_partial"> 

有position: relative，但就是不設置top或left這樣它就能保持它在哪裏。如果您需要將其與其他祖先進行絕對匹配，請改爲使用適當的元素position: relative。

Answer 3

再次，這是艱難的，沒有看到你的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正確對齊。如果我的理解正確，這應該有助於你的情況。