Question

HTML 的

<div style="width:50%;overflow:hidden">  
        <div id="inboxHeader">
                    <div id="inboxCount"><p>Earth</p></div>

        </div>
    </div>

CSS

#inboxHeader{
        background-color:yellow;    
        height :300px;
        position: relative;
    }

    #inboxCount{
        position: absolute; 
        bottom: 0;
        float:right; 
    }

Earth位于bottom left角落。那么如何将其转移到bottom right角落？

Answer 1

设置right:0而不是float:right

http://jsfiddle.net/8np2f/4/

Answer 2

因为它是float:right;

的绝对定位元素更改right: 0px;

如果它位于相对位置，那么你需要float它到right但是绝对定位会从DOM的流中移除元素。

但有一点需要注意，请确保父元素根据需要将其位置设置为relative或absolute，或者子元素可以将自己定位在DOM树中的最高位置有位置设置。

Answer 3

float - ing对absolute - 定位元素没有影响。改为设置right属性。

所以，改变一下：

#inboxCount{
    position: absolute; 
    bottom: 0;
    float:right; 
}

对此：

#inboxCount{
    position: absolute; 
    bottom: 0px;
    right: 0px; 
}

Answer 4

HTML

<div style="width:50%;overflow:hidden"> <div id="inboxHeader"> <div id="inboxCount"> <p>Earth</p> </div> </div> </div>

CSS

#inboxHeader {
    background-color:yellow;
    height :300px;
    position: relative;
}
#inboxCount {
    position: absolute; 
    bottom: 0;
    right: 0; /* No need for float:right with absolute positioning */
}

我已更新您的Demo

Answer 5

您必须在id inboxCount中添加规则权限：0。

以下是一个示例：http://zip.net/brmZth

希望这有帮助

Answer 6

只需发布一个描述性答案，这样可能有助于某人。

位置属性可用于解决此问题

<div id="outer" style="width: 400px; height: 400px; border: 1px solid red; position: relative">
    <div id="inner" style="width: 200px; height: 200px; border: 2px solid yellow;  right:0;bottom:0;position:absolute;">
</div>

jsfiddle to check a DEMO

如果我们在外部设置相对定位＆＃39; div，外部的任何元素＆＃39; div将相对于＆＃39;外部＆＃39; DIV。然后，如果我们在内部设置绝对定位＆＃39; div，我们可以将它移到＆＃39;外部＆＃39;的右下角。 div使用＆＃39; right＆＃39;和＆＃39;底部＆＃39;属性。

相对：如果指定position：relative，则可以使用top或bottom，left或right来相对于文档中通常出现的位置移动元素。

它的真正含义是＆＃34;相对于自身＆＃34;。如果设置position：relative;在一个元素上但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的位置，它将完全像您将它保留为position：static;但是如果你给它一些其他的定位属性，比如top：10px;，它会将它的位置从它正常的位置向下移10个像素。

绝对：当您指定position：absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。还有一种定位类型，允许您将任何页面元素准确地放置在您想要的位置。

任何相对定位元素的子元素都可以绝对定位在该块中。

参考文献：

如何在另一个div到右下角设置div的位置？

6 个答案: