HTML元素不会向右定位

Question

我刚刚练习了使用HTML和CSS，我遇到了一个问题。我希望这个(蓝色方格中的物体)在右边，但由于某种原因，它会在其他东西下面。我怎么才能修好它？以下是我尝试过的：

​

​

HTML：

                    <div class="status-post row">
                        <div class="post-meta col-xs">
                            <center>
                            <img src="./testpost.png" alt/>
                            <p>
                                "This is a test status... Test. Test. Test."
                            </p>
                           </center>
                        </div>
                        <div class="post-interact col-xs-2">
                            <a href="#" class="vote voteup">
                                <img src="./img/global/upvote.png" alt/>
                            </a>
                            <span id="picidhere" class="count">100</span>
                            <a href="#" class="vote report">
                                <img src="./img/global/report.png" alt/>
                            </a>
                        </div>
                    </div>

CSS：

#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}

#appbody .status-post .post-meta {
margin-bottom: 25px;
}


#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}

#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";

}

#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;

}

#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}

#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}


#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}

Answer 1

#appbody .status-post .post-interact {
 position: absolute;
 top: 10px;
 right: 10px 
}

使用绝对定位将元素放置

编辑

请检查此演示程序以了解绝对定位http://jsfiddle.net/jja27pce/

Answer 2

正如其他人所说的，您需要将内容定位为absolutely，然后定位到右上角。

这样的代码应该有效：

.post-interact {
   position: absolute;
   top: 0px;
   right: 0px 
}

Answer 3

请添加下面的css

.post-interact {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  }

你的css的底部。