位置重叠 div 在另一个 div 中

Question

我在 'main' div 中有一些 'person' div。在 'person':hover 我显示了一个覆盖层 div。我希望它只出现在 'main' div 范围内，而不是超出 'main' 范围。这样：

当光标在AGCH上时div

当光标在 JALO 上时 div

我希望 Jack London 的右边框与 Main 的右边框对齐。

完整示例在这里：https://jsfiddle.net/yjdrnk9o/1/

HTML

 <div id="main">
    <div class="person">
        <span  class="short-name">WISH</span>
        <div class="more">
            <span>William</span>
            <span>Shakespeare</span>            
        </div>
    </div>

    <div class="person">
        <span  class="short-name">AGCH</span>
        <div class="more">
            <span>Agatha</span>
            <span>Christie</span>           
        </div>
    </div>

    <div class="person">
        <span  class="short-name">JALO</span>
        <div  class="more">
            <span>Jack</span>
            <span>London</span>         
        </div>
    </div>

</div>

CSS

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

谢谢

Answer 1

像这样？ https://jsfiddle.net/yjdrnk9o/3/

我在你的 html 中添加了一个 class 来区分最后一个 .person 和其他元素，然后说 .person.right 元素的 .more 子元素应该对齐到右边.

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more {
    right: 0;
}

<div id="main">
 <div class="person">
  <span  class="short-name">WISH</span>
  <div  style="display:none;" class="more">
   <span>William</span>
   <span>Shakespeare</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">AGCH</span>
  <div  style="display:none;" class="more">
   <span>Agatha</span>
   <span>Christie</span>   
  </div>
 </div>

    <div class="person on-right">
  <span  class="short-name">JALO</span>
  <div  style="display:none;" class="more">
   <span>Jack</span>
   <span>London</span>   
  </div>
 </div>
    
</div>

Answer 2

使用:last-of-type或:nth-of-type(3)

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute; 
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more{
    right: 0;
}

<div id="main">
 <div class="person">
  <span  class="short-name">WISH</span>
  <div  style="display:none;" class="more">
   <span>William</span>
   <span>Shakespeare</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">AGCH</span>
  <div  style="display:none;" class="more">
   <span>Agatha</span>
   <span>Christie</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">JALO</span>
  <div  style="display:none;" class="more">
   <span>Jack</span>
   <span>London</span>   
  </div>
 </div>
    
</div>

位置重叠 div 在另一个 div 中

position overlaying div within another div

css

overlay