CODEWITHSUNDEEP
htmlcssresponsive-designposition
mr.moe
mr.moe

Reputation: 59

Position an element on an empty container responsively

I got the following problem. I want to display a map on a site. The map is a background image.

This Code makes the image perfectly responsible. 

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 */
}

So far so good!

But now I want to have some sort of location pin on that map, that behaves also responsive. Since I want to animate it I didn't include in the map graphics, so that is of the table.

Is that possible to do?

Using position:relative; doesn't work because the parent element do not have a width/height specified. Margin/Padding didn't work either.

style for the location pin:

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

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

html looks like this:

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

Any ideas how to pull this off?

Upvotes: 1

Views: 217

Answers (2)

otherDewi
otherDewi

Reputation: 1098

add position: relativeto #map the width of the map seems to be 100% of its parent. position:relative for the pin should then work.

Unless you set the map to position:relative, any relative or absolute positioned elements within that <section id="map"> will take its relative position from the <body>

Upvotes: 2

Stephan Weinhold
Stephan Weinhold

Reputation: 1643

Can't test it because I don't have the map-image, but this seems working: 

position: absolute;

jsfiddle

Upvotes: 1

Related Questions