如何在另一個div內設置div的位置到右下角？

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的角落呢？

來源

2014-04-01 prime

瞭解的定位檢查[這裏]（http://www.w3schools.com/css/css_positioning.asp） .. – Soundar

設置right:0代替float:right

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

來源

2014-04-01 18:26:52

因爲它是爲right: 0px;

絕對定位的元素變化float:right;如果它的定位比較，那麼你就需要float它的right但是絕對定位將刪除DOM的流動的元件。然而，

一個警告確保父元素都有它的位置設置要麼relative或absolute根據需要，或者子元素可以擺正自己的位置反對，有一個位置集中的DOM樹的最高水平。

來源

2014-04-01 18:26:04 RemarkLima

float -ing對absolute -ly定位的元素沒有影響。改爲設置right屬性。

因此，改變這種：

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

要這樣的：

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

來源

2014-04-01 18:26:49 svidgen

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

來源

2014-04-01 18:30:05 Mahmoud

您必須添加規則權：在ID inboxCount 0。

下面是一個例子：http://zip.net/brmZth

希望這有助於

來源

2014-04-01 18:32:41 Carra

只是發表一個描述這個問題，所以它可能會幫助別人。

位置屬性可用於如果我們設置在「外部」的div相對定位來解決這個問題

<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

，「外部」的div內的任何元素將被相對定位以'外'div。那麼如果我們在'inner'div上設置絕對定位，我們可以使用'right'和'bottom'屬性將它移動到'outer'div的右下角。

相對：如果您指定的位置是：相對的，那麼你可以使用頂部或底部，並向左或向右相對於它通常會發生在文檔中元素移動。

它的真正含義是「相對於自身」。如果你設置位置：相對;在一個元素上，但沒有其他定位屬性（頂部，左側，底部或右側），它根本不會影響它的定位，它將與將它放在位置上一樣：static;但是如果你給它一些其他的定位屬性，比如top：10px，它會將它的位置從它通常所在的位置向下移動10個像素。

絕對：當您指定position：absolute時，該元素將從文檔中移除並放置到您告訴其去的位置。還有一種定位方式，可以讓你精確地將任何頁面元素放在你想要的位置。

作爲相對定位元素的子元素的任何元素都可以絕對定位在該塊內。

參考文獻：

來源

2017-05-17 12:14:04 prime

如何在另一個div內設置div的位置到右下角？

回答

相關問題