将div放在图片下方

Question

我正在开发布局，并希望在用户单击照片时创建选项列表。就像打开一个气球（div）一样，在该气球内可以有一些选项，例如我的帐户，注销。

我看到的一个例子就是这个模板

我的问题不是关于使用javascript打开此div，而是关于定位。我如何创建一个div以留在该位置

.topnav {
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: relative;
}

.topnav a {
  float: left;
  display: block;
  color: #4e4e4e;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.selecionada {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.topnav .icon {
  display: none;
}

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
  integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<header>
  <nav class="topnav" [class.responsive]="MenuTop" >

    <a style="width:230px;">
      Sistema
    </a>

    <a class="selecionada">Home</a>
    
   
    <a style="float:right; padding: 0px; margin: 0 auto; padding-top:6px;padding-bottom: 6.5px;padding-left: 5px;padding-right: 5px;">
      <img src="https://png2.kisspng.com/20180403/tbe/kisspng-computer-icons-avatar-female-woman-girl-power-5ac2fc93cde372.7788089015227280838433.png" 
      alt="Smiley face" height="40" width="40">
    </a>
    

    <a style="float:right"><i class="fas fa-th"></i></a>
    <a style="float:right"><i class="fas fa-bell"></i></a>
    


    <a class="icon" (click)="OpenClose('MenuTop')">
      <i class="fa fa-bars"></i>
    </a>

    

  </nav>
</header>

如上例所示，如何将div置于神奇女侠的照片下

Answer 1

似乎您正在寻找绝对位置的元素。我添加了带有绝对位置的红色Div和一些Jquery来切换div。您可能需要在该div上设置更多样式，才能获得确切的样式。

$(document).ready(function(){
   $("#openRedDiv").click(function(){
       $("#redDiv").slideToggle();
   })

})

.topnav {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: relative;
}

.topnav a {
  float: left;
  display: block;
  color: #4e4e4e;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.selecionada {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.topnav .icon {
  display: none;
}

#redDiv{
position:absolute;
top:55px;
right:0px;
width:150px;
height:80px;
background:#ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
  integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<header>
  <nav class="topnav" [class.responsive]="MenuTop" >

    <a style="width:230px;">
      Sistema
    </a>

    <a class="selecionada">Home</a>
    
   
    <a style="float:right; padding: 0px; margin: 0 auto; padding-top:6px;padding-bottom: 6.5px;padding-left: 5px;padding-right: 5px;" id="openRedDiv">
      <img src="https://png2.kisspng.com/20180403/tbe/kisspng-computer-icons-avatar-female-woman-girl-power-5ac2fc93cde372.7788089015227280838433.png" 
      alt="Smiley face" height="40" width="40">
    </a>
    

    <a style="float:right"><i class="fas fa-th"></i></a>
    <a style="float:right"><i class="fas fa-bell"></i></a>
    


    <a class="icon" (click)="OpenClose('MenuTop')">
      <i class="fa fa-bars"></i>
    </a>

    <div id="redDiv"></div>

  </nav>
</header>