绝对位置对准问题

-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

绝对位置对准问题

回答

相关问题