CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fires_CZ
Fires_CZ

Reputation: 55

Bootstrap - fixed position over image

I need help with anchor icon over image in css/bootstrap. I try almost everything it look like it works but when I resize windows the icon is floating over image and is not anchored on same place.

My code

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
    
    <div class="col-sm">
        <!-- Image Map Generated by http://www.image-map.net/ -->
        <img src="https://www.roomsketcher.com/wp-content/uploads/2015/11/RoomSketcher-House-Floor-Plans.jpg" usemap="#image-map" id="roomSelector" style="position:relative; display: block;">
        <map name="image-map">
            <area target="" alt="LivingRoom" title="LivingRoom" href="" coords="44,215,215,217,214,395,243,394,242,555,42,555" shape="poly">
            <area target="" alt="Hallway" title="Hallway" href="" coords="213,216,296,218,297,312,390,314,390,394,216,394" shape="poly">
            <area target="" alt="Room103" title="Room103" href="" coords="392,395,392,557,244,555,244,394" shape="poly">
            <area target="" alt="FireRoom" title="FireRoom" href="" coords="393,394,609,556" shape="rect">
            <area target="" alt="Garage" title="Garage" href="" coords="392,392,605,88" shape="rect">
            <area target="" alt="TechnicRoom" title="TechnicRoom" href="" coords="297,217,389,312" shape="rect">
        </map>
        
         <i class="fa fa-fw fa-bolt" style="left: 50%;
    top: 50%;
    position: absolute;
    margin-top: 0px;
    margin-left: 0px;"></i>
    </div>

Upvotes: 0

Views: 39

Answers (1)

thstamod
thstamod

Reputation: 174

You should try this 

<div class="col-sm">
    <!-- Image Map Generated by http://www.image-map.net/ -->
  <div class="wrapper">
    <img src="https://www.roomsketcher.com/wp-content/uploads/2015/11/RoomSketcher-House-Floor-Plans.jpg" usemap="#image-map" id="roomSelector" style="position:relative; display: block;">
    <map name="image-map">
        <area target="" alt="LivingRoom" title="LivingRoom" href="" coords="44,215,215,217,214,395,243,394,242,555,42,555" shape="poly">
        <area target="" alt="Hallway" title="Hallway" href="" coords="213,216,296,218,297,312,390,314,390,394,216,394" shape="poly">
        <area target="" alt="Room103" title="Room103" href="" coords="392,395,392,557,244,555,244,394" shape="poly">
        <area target="" alt="FireRoom" title="FireRoom" href="" coords="393,394,609,556" shape="rect">
        <area target="" alt="Garage" title="Garage" href="" coords="392,392,605,88" shape="rect">
        <area target="" alt="TechnicRoom" title="TechnicRoom" href="" coords="297,217,389,312" shape="rect">
    </map>

     <i class="fa fa-fw fa-bolt icons_pos"></i>
</div>
  </div>

and 

    .wrapper {
    position:relative;
     display:inline-block;
    }

    .icons_pos {
    position: absolute;
    right: 0;
    top: 50%;
    }

Upvotes: 2

Related Questions