html - 将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>