相对职位不是反叛的

Question

好吧，我的位置是：relative; 然后当然要使用顶部，左侧，底部和右侧进行定位。 是的，我一直都在控制台上，手动进行更改，然后将其放入实际的CSS文件中。 好吧，我喜欢这样做，但这是主要的问题。 它完全不响应大小变化。 让我向您展示一个快速演示。

您可以看到第一张图片，删除，编辑等主题图标都很好，但是一旦放大，您就可以在第二张图像上看到它完全被弄乱了。 好了，这是该页面的全部代码。 我只是真的想要一种可以使响应变得容易响应的方法。 Position：relative很简单，但不幸的是它没有给您响应能力:(

最低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;
}

最小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>

如果你们想要的不只是禁忌代码。 请这样说，将不胜感激帮助！ 顺便说一句我在这里工作。 如果我们可以在这里解决，那就太好了！

根据James Howell的说法，我是针对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>

然后是CSS

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

但是当我变焦时，它仍然像往常一样混乱。 -_-

Answer 1

使用时：

position: relative

您正在相对于其父元素定位元素。 因此，如果该父元素的位置发生变化（例如，通过浏览器调整大小），则以这种方式定位的元素也将发生变化。

我建议将要定位的项目包装在一个包含元素（例如div）中，并为该元素提供相对定位，使子元素获得绝对定位。 像这样：

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

.parent{
    position:relative;
}

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

Answer 2

首先删除所有相关语句。 然后，您需要一些高级的flexbox样式。 使用flex-wrap: wrap可以防止东西从屏幕的左侧掉落，因为这将使内容成为多行。 使用justify-content: flex-end可以将所有内容正确地对齐到右侧，就像您尝试相对放置以适应更大的屏幕一样。

祝您有个好项目。

Answer 3

您必须完全重做布局方法。 完全按照您描述的方式构建的网站的快速解决方案是添加具有固定宽度的视口以删除“响应性”：

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

PS。 您可以将1200替换为看起来还可以的任何宽度。