如何对齐div，使孩子的右上角接触父母的左下角？

Question

我正在尝试在我的网站上创建一个消息框，以便当用户单击收件箱图标时会出现一个带有消息的框。类似于stackoverflow如何做到这一点。 Stackoverflow 通过在包含收件箱、成就等的有序列表之外放置一个 div，然后绝对定位该 div，使其看起来从收件箱图标中删除。

我也在尝试这样做，但我希望消息框成为列表项的子项。

.list {
  display: flex;
  position: relative;
}

div.messages {
  display: block;
  position: absolute;
}

<ol class="list">
  <ul> inbox
    <div class="messages"> some message<br> blah blah another message
    </div>
  </ul>
  <ul> another </ul>
</ol>

有没有一种简单的方法来确保消息框的右上角接触到列表项的左下角，而不管消息框的宽度如何？

也许我在想这个错误，这真的不是亲子情况（因为我想要做的基本上是将孩子放在父母之外......）。但是对于我网站部分的概念组织，我确实希望将其作为父母的孩子来处理。

Answer 1

喜欢这个

 $(".nav_link").on('click',function() {

   $(this).next('.container').addClass("block_container");
 })

    .list {
      	display: inline-block
      	position: relative;
    }
    li{
        list-style: none;
    }
    .list .dropdown_ancker{
      	display: inline-block;
      	width: 50px;
      	background-color: red;
        list-style: none;
        margin-right: 12px;
      	position: relative;
    }
    .container{
        position: absolute;
        display: none;

      }
      .block_container{
        display: block;

      }

      .container{
      background-color: green;
      right:50px;

      }

      .container li{
        color: #252525;
        padding: 12px 20px;


      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class = "list"> 

       <li class="dropdown_ancker">another</li>
       <li class="dropdown_ancker">
        <span class="nav_link">inbox</span>
        <ul class="container">
          <li class="m">something</li>
          <li class="m">something</li>
        </ul>

       </li><!--
    --><li class="dropdown_ancker">another</li>
    </ol>

.container right= dropdown_ancker 宽度

Answer 2

您的父级ul 也应该有position: relative;，然后您可以将right: 0; 设置为您的下拉列表div.messages。另外，我认为不需要设置 .list 在这里作为flexbox。

.list {
  display: flex;
  position: relative;
}

div.messages {
  display: block;
  position: absolute;
  right: 0;
  border: 1px solid blue; /*for testing only, easier to see the element*/
}

ul {
  border: 1px solid red; /*for testing only, easier to see the element*/
  position: relative;
  padding: 0 10px;
}

li {
  list-style: none; /*to remove the bullet symbol from li*/
}

<ol class="list">
  <li>
    <ul>
      <li>
        inbox
        <div class="messages"> some message<br> blahblahblahblah blah another message
        </div>
      </li>
    </ul>
  </li>
  <li>
    <ul>
      <li>another</li>
    </ul>
  </li>
</ol>

Answer 3

如果你知道如何使用正确的 html 结构、元素定位、css 调整和 jquery，你就可以做到这一点。这是我为您创建的示例。它在每个li 之后使用一个简单的ul 和menu-box div 来实现所需的结果。

$(function(){
  
 $('.main-menu li > a').click(function(){
    $('.menu-box').hide();
    $(this).next().show();
  });
  
  $(document).mouseup(function(e) 
{
    var container = $(".menu-box");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
  
});

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

body{
  padding:0px;
  margin:0px;
}

.fa {
position: relative;
display: table-cell;
width: 60px;
height: 40px;
text-align: center;
vertical-align: middle;
font-size:25px;
}

.main-menu{
  width:100vw;
  height:38px;
  text-align:center;
}

.main-menu>ul {
margin:10px;
  display:inline-block;
}

.main-menu li {
position:relative;
display:block;
width:60px;
float:left;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 16px;
text-decoration:none;
border:1px solid black;
}

.menu-box{
background:gray;
border:1px solid black;
width:250px;
height:350px; /*Set as necesary or auto based on content*/
overflow:hidden;
z-index:1000;
display:none;
margin-top:-1px;
position:absolute;
/*left:0*/  /* Use this if your want to align box to the left*/
right:60px; /* width of icon can be set in jQuery if dynamic */
}

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click on any icon</h2>
<nav class="main-menu">
            <ul>
                <li>
                    <a>
                        <i class="fa fa-home fa-2x"></i>
                    </a>
                  <div class="menu-box"></div>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-laptop fa-2x"></i>
                    </a>
                    <div class="menu-box"></div>
                </li>
                <li>
                    <a href="#">
                       <i class="fa fa-list fa-2x"></i>
                    </a>
                    <div class="menu-box"></div>
                </li>
            </ul>
  </nav>

希望这会有所帮助。快乐编码。 :)