Как «прилепить» popup к вызывающей его иконке?

Question

[tvsjke]

Всем привет.

Есть иконка, по нажатию на которую вылезает попап.

У попапа есть треугольник сверху. А сам попап - резиновый. Так вот вопрос - как мне сделать, чтобы это треугольник всегда был ровно под иконкой, вне зависимости от размера div ? Ну и сам дим был нормально "привязан" к иконке, а не как у меня =)

<a href="#""><img id="login-img" src="img/enter.png"/></a>
<div id="login-popup">
  <div>
  <p>войти</p>
    <div class="clearfix">
      <label>ваш e-mail</label>
      <input name="email" type="text">
      <label>ваш пароль</label>
      <input name="password" type="text">
      <a id="remind-password">Напомнить пароль</a>	          											
    </div>
    <div class="result"></div>
    <div class="login-buttons">
      <a class="btn z-depth-0" id="button_login">войти</a>	          											
      <a href="">Зарегистироваться</a>
    </div> 												
  </div>
</div>

#login-popup {
	position: absolute;
	top: 55px;
	left: -232px;
}

#login-popup > div {
	position: relative;
	width: auto;
	height: auto;
	background-color: white;
	box-shadow: 0px 0px 27px 2px rgba(0, 0, 0, 0.14);
	z-index: 2;
	padding: 30px;
}

#login-popup > div:after {
	content: "";  
	position: absolute;
	bottom: 100%;
	left: 61%;
	width: 0; 
  	height: 0; 
 	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-bottom: 10px solid white;
}

Answer 1

[display: block]

Позиционируйте треугольник относительно иконки, т.е. треугольник будет :after-элементом не #login-popup, a иконки.