underneath position of edit block

by Sergey Linnick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="edit">lorem</div>

CSS

.content {
  background: silver;
  height: 500px;
  width: 500px;
  padding: 50px;
  position: relative
}

.element {
  height: 35px;
  width: 200px;
  margin: 15px auto;
  background: #000;
}

.element:last-child{
  height: 50px;
}

.element:first-child{
  height: 20px;
}

.edit {
  display: inline-block;
  position: absolute;
  background: #DEFBFF;
  padding: 5px 10px;
  border: 1px solid #B3CACE;
}

JavaScript

$('.element').click(function() {
	var elHeight = $( this ).outerHeight();
  var elPosL = $(this).offset().left;
  var elPosT = $(this).offset().top;
  $('.edit').css({
    "left": elPosL ,
    "top": elPosT + elHeight
  })
  console.log(elHeight);
});