빈 컨테이너에 요소를 배치하십시오.

다음과 같은 문제점이 있습니다. 사이트에지도를 표시하고 싶습니다. 지도는 배경 이미지입니다.빈 컨테이너에 요소를 배치하십시오.

이 코드는 이미지를 완벽하게 책임집니다.

section#map { 
    max-width: 960px; 
} 

div#map-image { 
    background: url(Map.jpg) top left no-repeat; 
    background-size: 100%; 
    padding-top: 41.875%; /* 402px/960px = 0.41875 height/width of map */ 
}

지금까지 너무 좋아!

하지만 이제지도에서 일종의 위치 핀을 사용하고 싶습니다. 그 위치는 반응 형입니다. 애니메이션을 만들고 싶기 때문에지도 그래픽에 포함시키지 않았으므로 테이블에 포함됩니다.

그럴 수 있습니까?

부모 요소의 너비/높이가 지정되지 않았으므로 position:relative;을 사용하면 작동하지 않습니다. 여백/안쪽 여백도 작동하지 않았습니다. 위치 핀

스타일 :

span#location 
{ 
    background-color: red; 
    width: 12px; 
    height: 12px; 
    border-radius: 6px; 

    /*position: relative; 
    top: 86.9%; 
    left: 52.26%;*/ 
}

HTML은 다음과 같습니다

<section id="map"> 
    <span id="location"></span> 
    <div id="map-image"></div> 
</section>

모든 아이디어를 어떻게 해내?

출처

2014-01-22 mr.moe

추가 position: relative ~ #map지도의 너비는 부모의 100 % 인 것처럼 보입니다. 그런 다음 핀에 대해 position:relative이 작동해야합니다. 당신이 위치지도 설정하지 않는 한

: 상대를, 그 <section id="map"> 내의 상대 또는 절대 위치 요소에서의 상대적 위치를 취할 것 <body>

출처

2014-01-22 13:18:18 otherDewi

감사합니다,하지만 난 당신이 오타를 찾은 것 같아 :하지만,이 작업을 보인다 나는 위치'에'#의지도'를 설정할 때 작동 : 상대;'와'#의 location'에 '위치 : 절대' –

@ mr.moe 오타가 수정되었습니다. – otherDewi

내가지도 이미지를 가지고 있지 않기 때문에 그것을 테스트 할 수 없습니다

position: absolute;

jsfiddle

출처

2014-01-22 13:26:28

빈 컨테이너에 요소를 배치하십시오.

답변

관련 문제