어떻게 관련 이미지 태그를 절대적으로 배치 할 수 있습니까?

Question

저는 레일과 자바 스크립트에 초보자입니다. 각 유형과 영역에 속한 경기장 테이블을 가지고 있습니다. 이들은 색인 페이지에서 부분으로 표시되며 각각은 화면의 왼쪽에있는 맵에서 자체 아이콘을가집니다.

각 venuetype에 differant 아이콘이 표시되도록 내 app에 클립 클립을 사용하여 업로드 한 이미지를 보관하는 새로운 mapicons 테이블을 추가했습니다. 이 모든 잘 작동하지만 새지도 아이콘을 포함 할 때지도 나누기 아이콘을 배치하는 데 사용하는 자바 스크립트.

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

표시 I 업로드 및 각 venuetype에 할당하지만이 부분이 아니라 그 장소의 오른쪽 상단에 위치 올바른 mapicons 화면 왼쪽의지도에서

희망 사항이 질문에 대한 답변을 드리겠습니다. 필요한 사항을 물어보십시오. 어떤 도움을 주셔서 감사합니다 그 많은 감사!

편집

는 Heres는 내가 도움이되기를 바랍니다 스크린 샷의 부부, 첫 번째는 mapicons가 현재 방법이다. 장소 부분은 이름 왼쪽에 큰 색의 아이콘이있는 Tester1, Tester2 등으로 표시되며 이름 아래 회색 글자는 유형 (유형 1, 2 또는 3)입니다. 그리고지도 아이콘은 각각의 장소 기록에서 가져온 상단 및 좌측 값과 함께 절대적으로 배치 된 왼쪽 검은 색 별입니다. 상술 한 바와 같이 I 코드를 변경할 때

번째 스크린

은 파셜 동일한 표시 대신 블랙 스타 인의 mapicons 작은 컬러 사각형으로 정확하게 표시하지만 정확하게 위치하지 않는 것이다. 그들은 자신의 공연장 부분의 오른쪽 상단에 붙어 있습니다.(이하는 조롱 업 이미지)를 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

오류가 발견되었습니다. 무엇

이었다

<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를 보지 않고 힘든,하지만 난 다른 해상도 또는

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; 



} 

수정 자유롭게에 대한 onRefresh 이벤트로 변경할 수 있습니다 내 자신의 "정의"의 위치에 대한 코드의이 비트를 사용하여 이 특별한 경우에는 자식 div가 부모 div와 오른쪽 정렬되도록 만듭니다. 내가 올바르게 이해한다면, 이는 귀하의 사건을 도와 줄 것입니다.