How to make a div appear in the right place after clicking on a link?

Question

css

How it works now can be seen here: spirulina-pacifica.ru/site
Press on the Input, a window appears next to the languages, as a result of which the block is shifted to the right. But he moves with a delay. How to solve it?

<div id="block-links" class="bar"><a id="open-close" href="#" title="Закрыть">X</a> Молодец! </div>

here is the code

<script>
$(document).ready(function() {
  $('#open-close').show();
  $('#block-links').hide();

  $('#open-close').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('#block-links').slideToggle();
  });
});
</script><code lang="javascript">

и нужно ссылку добавить в блок для закрытия, как это сделать ?

Answer 1

<div id="block-links" class="bar">
    <a id="close" href="#" title="Закрыть">X</a> Молодец!
</div>

$(document).ready(function() {
  $('#open-close').show();
  $('#block-links').hide();

  $('#open-close').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('#block-links').show();
  });
  $('#close').click(function(event) {
    event.preventDefault();
    $('#block-links').hide();
  });
});

Answer 2

htmlbook.ru/css/z-index will save you