Position relative is not repsonsive

Question

Well, I have this thing with position:relative; And then of course 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 responsive 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 messed up. Well here is my whole code for that page. I just really want a way that I can make the stuff responsive easily. Position:relative is easy but it doesn't give you a responsiveness unfortunately :(

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 I'm 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 messes up like usual. -_-

Answer 1

When you use:

position: relative

You are positioning an element relative to its parent. So if the position of that parent element changes (for instance via a browser resize) then so too will elements positioned in this way.

I would recommend wrapping the items you wish to position in a containing element such as a div and give that element relative positioning with the child elements getting absolute positioning. Like this:

<div class="parent">
    <div class="child"></div>
</div>

.parent{
    position:relative;
}

.child{
    position:absolute;
    right:0px;
}

Answer 2

First remove all relative statements. Then you need some advanced flexbox styles. With flex-wrap: wrap you can keep things from falling of the screen on the left, as this will allow the content to be multi-line. Using justify-content: flex-end you can align everything nicely to the right, as you tried with relative positioning to accommodate larger screens.

Good luck with the nice project.

Answer 3

You have got to completely redo your layout approach. A quick fix for a site that is completely build the way you describe is to add a viewport with a fixed width to remove 'responsiveness':

<meta name="viewport" content="width=1200"> 

PS. You can replace 1200 with any width at which things still look OK.