职位相对不是代表性的

Question

嗯，我有这个位置的东西：亲戚;然后当然使用顶部，左侧，底部和右侧来定位。嗯，是的，我一直这样做去控制台，手动更改它，然后把它放在实际的CSS文件中。我喜欢这样做，但这是 MAJOR 问题。它完全没有响应尺寸的变化。让我给你看一个快速演示。

你可以看到第一张图片，主题图标，如删除主题，编辑等等都很好但是只要你放大，你就可以在第二张图片上看到，它完全搞砸了。那么这是我的整个代码页面。我真的想要一种方法，我可以轻松地使事情响应。位置：亲戚很容易，但不幸的是它并没有给你一个响应:(

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

如果你们想要的不仅仅是tabove代码。请说出来，非常感谢帮助！顺便说一句，我正在使用here。如果我们能在这里工作，那将是非常棒的！

根据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

您必须完全重做布局方法。以完全按照您描述的方式构建的网站的快速修复是添加具有固定宽度的视口以删除响应性＆＃39;：

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

PS。你可以用任何看起来还不错的宽度替换1200.