Открытие div 'popup' от нажатия родительского div

Question

При нажатии на элемент «test», он открывает всплывающий тест div с прайс-листом следующим образом:

Однако Я застрял при попытке заставить div всплывать при «правильном» выравнивании элемента, а не влево, вот так:

Как мне этого добиться?

$(document).ready(function() {
  $(".test").each(function() {
    $(this).click(function() {
      var leftpos = $(this).offset() - window.screen.width;
      $(this).children().css("left", leftpos.left);
      $(this).children().css("display", "block");
    });
  })
});

.price-list-test {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  display: none;
  position: absolute;
}

.test {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  Open
  <div class="price-list-test">
    Test
  </div>
</div>

Answer 1

Сделать позицию класса 'test' относительной, после того, как осталось значение 'test-list-test': 0%

.test { 
  postion: relative; 
}
.price-list-test {
  left: 0 %;  
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  display: none;
  position: absolute;
}