相對職位不是反叛的

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替換為看起來還可以的任何寬度。