Position relative is not repsonsive

Well, i have this thing with position:relative; And then ofcourse using top,left,bottom, and right to position. Well yeah i do that all the time go to the console, and change it manually and then put it in the actual css file.. Well i love doing that, but here is the MAJOR issue. It is completely not repsonsive to changes in size. Let me show you a quick demo.

You can see the first picture, the topic icons which are like delete topic,edit,etc.. are all fine but as soon as you zoom in, you can see on the second image, it is completely messud up.. Well here is my whole code for that page. I just realllllyyy want a way that i can make the stuff repsonsive easily. Position:relative is easy but it dosent give you repsonsiveness unfourtunately :(

Minimal CSS:

span.icon_share_topic {
    position: relative;
    /* left: 1422px; */
    /* top: 1048px; */
    margin-left: 60%;
}
span.icon_flag_topic {
    position: relative;
    left: 990px;
}
span.edit_topic_button {
    position: relative;
    right: -1087px;
    bottom: 8px;
}
span.bookmark_topic_button {
    position: relative;
    right: -958px;
}
span.replies_num_container {
    font-size: 12px;
    position: relative;
    left: 929px;
}
ng-md-icon.ng-scope.icon_reply_topic {
    top: -9px;
    position: relative;
    right: 2px;
}
button.md-icon-button.backward.md-button.ng-scope.md-ink-ripple {
    position: relative;
    left: 400px;
}
span.delete_topic_button {
    position: relative;
    left: 1050px;
    bottom: 8px;
}

Minimal HTML :

  <div class="topic-buttons">
        <div class="topic-voting">
            <span class="vote-counting">
                {{countVote}} <span ng-if="currentAuthGet==null;"> Vote </span>
            </span>
            <span ng-if="currentAuthGet!=null;">
                <div class="vote-icons">
                    <md-button class="md-icon-button" aria-label="Custom Icon Button" ng-click="upVote();">
                        <ng-md-icon icon="thumb_up" id="upVoteIcon" class="thumb-icon" size="20"></ng-md-icon>
                    </md-button>
                    <md-button class="md-icon-button" aria-label="Custom Icon Button" ng-click="downVote();">
                        <ng-md-icon icon="thumb_down"  id="downVoteIcon" class="thumb-icon" size="20"></ng-md-icon>
                    </md-button>
                </div>  
            </span>
        </div>
         <span ng-if="deleteTopicPriv();">        
            <span class="delete_topic_button">
                <md-button class="md-icon-button">
                        <md-button class="md-icon-button animation-target" ng-click="deleteTopic()">
                            <md-tooltip md-direction="top">
                              Delete
                            </md-tooltip>
                            <ng-md-icon icon="delete" style="fill: #ff6400;" size="20"></ng-md-icon> 
                        </md-button>
                </md-button>
            </span>
        </span>
        <span ng-if="editTopicPriv();">        
            <span class="edit_topic_button">
                <md-button class="md-icon-button">
                        <md-button class="md-icon-button animation-target" ng-click="editTopic($event)">
                            <md-tooltip md-direction="top">
                              Edit
                            </md-tooltip>
                            <ng-md-icon icon="edit" style="fill: #ff6400;" size="20"></ng-md-icon> 
                        </md-button>
                </md-button>
            </span>
        </span>
        <span ng-if="currentAuthGet!=null;">        
            <span class="bookmark_topic_button">
                <md-button class="md-icon-button">
                        <md-tooltip md-direction="top">
                            Bookmark
                        </md-tooltip>
                        <span ng-if="bookMarkToggleTopic == true" ng-click="bookmarkClickOutlineTopic();">
                            <ng-md-icon icon="bookmark_outline" style="fill: #ff6400;" size="20"></ng-md-icon>
                        </span>
                        <span ng-if="bookMarkToggleTopic == false" ng-click="bookmarkClickNonOutlineTopic();">
                             <ng-md-icon icon="bookmark" style="fill: #009688;" size="20"></ng-md-icon>
                        </span>
                </md-button>
            </span>
        </span>
        <span ng-if="flagSee();">
           <span class="icon_flag_topic">
                    <md-button class="md-icon-button" ng-click="">
                        <md-tooltip md-direction="top">
                            Flag
                        </md-tooltip>
                        <ng-md-icon icon="flag" style="fill: #ff6400;" size="20"></ng-md-icon> 
                    </md-button>
            </span>

        </span>
        <span class="icon_share_topic">
        <md-menu>
            <md-button class="md-icon-button" ng-click="openShareMenu($mdOpenMenu, $event)">
                <md-tooltip md-direction="top">
                    Share
                </md-tooltip>
                <ng-md-icon icon="share" style="fill: #ff6400;" size="20"></ng-md-icon>
            </md-button>
            <md-menu-content width="4">
                <md-menu-item>
                    <md-button socialshare socialshare-provider="facebook" socialshare-text="Look at my post! Here : " socialshare-hashtags="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}">
                        <ng-md-icon icon="facebook-box" style="fill: #3b5998" size="20"></ng-md-icon>
                        Facebook
                    </md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button socialshare socialshare-provider="twitter" socialshare-text="Look at my post! Here :" socialshare-hashtags="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}">
                        <ng-md-icon icon="twitter" style="fill: #0084b4" size="20"></ng-md-icon>
                        Twitter
                    </md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button socialshare socialshare-provider="linkedin" socialshare-text="Ng-Forum Post" socialshare-description=" Look at my post! Here : {{urlSHARINGCURRENT}} " socialshare-source="angularjs, ng-forum, replies , programming" socialshare-url="{{urlSHARINGCURRENT}}">
                        <ng-md-icon icon="linkedin-box" style="fill: #007bb5" size="20"></ng-md-icon>
                        Linkedin
                    </md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button socialshare socialshare-provider="google" socialshare-url="{{urlSHARINGCURRENT}}">
                        <ng-md-icon icon="google-plus-box" style="fill: #d34836" size="20"></ng-md-icon>
                        Google+
                    </md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>
        </span>
        <span ng-if="currentAuthGet!=null;">    
            <md-button class="md-raised md-accent" ng-click="replyTopic($event)">
                <ng-md-icon icon="reply" style="fill: #0affcf;" size="20" class="icon_reply_topic"></ng-md-icon>
                Reply
            </md-button>
        </span>
        <span ng-if="currentAuthGet==null;">
            <md-button class="md-raised md-accent" ng-click="notAuthReplyTopic()">
                <ng-md-icon icon="reply" style="fill: #0affcf;" size="20" class="icon_reply_topic"></ng-md-icon>
                Reply
            </md-button>
        </span>
    </div>

If you guys want more than just tabove code. Please say so, help would be greatly appreciated! Btw im working this here. it would be awesome if we can work it out here to!

According to James Howell i did this for HTML:

 <span ng-if="flagSee();" class="container_flag_icon">
           <span class="icon_flag_topic">
                    <md-button class="md-icon-button" ng-click="">
                        <md-tooltip md-direction="top">
                            Flag
                        </md-tooltip>
                        <ng-md-icon icon="flag" style="fill: #ff6400;" size="20"></ng-md-icon> 
                    </md-button>
            </span>

        </span>

And then this for CSS

span.container_flag_icon.ng-scope {
    position: relative;
}
span.icon_flag_topic {
    position: absolute;
    left: 976px;
}

But when i zoom it still messus up like usual.. -_-