如何讓div定位在另一個div的頂部角落？

Question

你好我計劃做一個div在另一個div的右上角放置

.another 
{ 
    position:fixed; 
    padding:09px; 
    margin:auto; 
    left:25%; 
    width:auto; 
    height:auto; 
    background:#ffffff; 
    z-index:999999; 
} 
.topcorner 
{ 
    float:right; 
    position:fixed; 
    left:25%; 
    z-index:99999999; 
} 

，這是我的HTML

<div class="another"> 
    <div class="topcorner"> 
     i am at top right corner 
    </div> 
    here is some other content 
</div> 

如何使topcorner div來放置在頂部right corner

Answer 1

必須使用非靜態位置（靜態是默認的，然後應用沒有指定位置時）在容器（相對,絕對或固定）;那麼您必須將絕對位置應用於子元素。

使用離開，頂部，右，底部可以設置子對象的出發點（在你的情況，右和頂部），並最終高度和寬度。

請注意，絕對 *位置*，該元素將從流刪除，它不會被認爲是在頁面一致的對象了;這意味着容器內容將在其下流動，如果子元素不存在。

演示：http://jsfiddle.net/pBS68/

CSS代碼：

.another { 
    padding:9px; 
    margin:0 auto; 
    width:50%; 
    height:200px; 
    border: 1px solid silver; 
    position: relative; 
} 

.topcorner {  
    position:absolute; 
    right: 0; 
    top: 0; 
    width: 100px;   
    border: 1px solid red; 
} 

Answer 2

使用position:relative來父母div和absolute給子div

.another{ 
    position:relative; 
    border:blue solid 1px; 
    height:200px; 
    background:#ffffff; 
} 
.topcorner{ 
    background:red; 
    width:30px; 
    height:30px; 
    position:absolute; 
    top;0; 
    right:0;; 
} 

DEMO

Answer 3

把你的CSS Top:*the pixels you want, can also be in minus"-"*;和Right:*the pixels you want, can also be in minus"-"*

這應該這樣做

Answer 4

Z-指數法可能沒有必要存在，至少在。另外一個盒子。

內框永遠無法將填充設置在.inner內。

嘗試刪除填充，看看是否得到你想要的。將Z-Indexes更改爲合理的值，例如.inner爲0，另一個爲10。

Answer 5

試試這個，

.another 
{ 
    position:relative; 
    padding:09px; 
    margin:auto; 
    width:auto; 
    height:200px; 
    background:#eee; 
    z-index:999999; 
} 
.topcorner 
{ 
    position:absolute; 
    top:0; 
    right:0; 
    z-index:99999999; 
    width:100px; 
    height:auto; 
    background:yellow; 
} 

jsFiddle File