絕對位置對準問題

-1

#main { 
 
     position: relative; 
 
     top:100px; 
 
     left:100px; 
 
     height:200; 
 
     width:600; 
 
     border:solid; 
 
     border-width:1px; 
 
    } 
 
    
 
    
 
    .rightContain { 
 
     position:absolute; 
 
     top:0; 
 
     right:0; 
 
     border:solid; 
 
     border-width:1px; 
 
     width:10px; 
 
    
 
    } 
 
    
 
    .selector { 
 
     position: relative; 
 
     margin:0; 
 
     padding:0; 
 
     border:solid; 
 
     border-color:blue; 
 
     border-width:1px; 
 
    } 
 
    .selector > p { 
 
     margin:0; 
 
     padding:0; 
 
     line-height:70%; 
 
    } 
 
    
 
    .selectorBox { 
 
     border:solid; 
 
     border-width:1px; 
 
     width:60px; 
 
     height:60px; 
 
    }

<html> 
 
    <head> 
 
    </head> 
 
    
 
    <body> 
 
     <div id="main"> 
 
      <div class="rightContain"> 
 
      <div class="selector"> 
 
        <p>*</p> 
 
        <p>*</p> 
 
        <p>*</p> 
 
      </div> 
 
      <div class="selectorBox"> 
 
       item 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
    </html>

我試圖讓.selectorBox右上角對齊到.selector div的右下角。有誰知道我能做到這一點？

來源

2016-07-28 MarMan29

我加入position:absolute和right:-1px到#selectorBox ，我相信它達到你正在尋找的結果。

可以更改right css以將選擇框向左或向右移動。

#main { 
 
     position: relative; 
 
     top:100px; 
 
     left:100px; 
 
     height:200px; 
 
     width:600px; 
 
     border:solid; 
 
     border-width:1px; 
 
    } 
 
    
 
    
 
    .rightContain { 
 
     position:absolute; 
 
     top:0; 
 
     right:0; 
 
     border:solid; 
 
     border-width:1px; 
 
     width:10px; 
 
    
 
    } 
 
    
 
    .selector { 
 
     position: relative; 
 
     margin:0; 
 
     padding:0; 
 
     border:solid; 
 
     border-color:blue; 
 
     border-width:1px; 
 
    } 
 
    .selector > p { 
 
     margin:0; 
 
     padding:0; 
 
     line-height:70%; 
 
    } 
 
    
 
    .selectorBox { 
 
     position:absolute; 
 
     right:-1px; 
 
     border:solid; 
 
     border-width:1px; 
 
     width:60px; 
 
     height:60px; 
 
    }

<html> 
 
    <head> 
 
    </head> 
 
    
 
    <body> 
 
     <div id="main"> 
 
      <div class="rightContain"> 
 
      <div class="selector"> 
 
        <p>*</p> 
 
        <p>*</p> 
 
        <p>*</p> 
 
      </div> 
 
      <div class="selectorBox"> 
 
       item 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
    </html>

來源

2016-07-28 13:55:04

嗨佩德羅，由於是這就是我想要的，但我不得不承認，我不明白。我想通過使.selectorBox絕對的，它會尋找一個相對於位置相對的父元素。爲什麼它在.selector下方的位置？ – MarMan29

@ MarMan29，因爲我們沒有給它一個「頂部」的位置 –

所以，如果你給它沒有頂部或正確的位置，它會像一個相對定位的元素，直到你開始移動它？ – MarMan29

絕對位置對準問題

回答

相關問題