How do I display a DIV when passing the Mousa over another DIV while holding the same opening position?

Question

I will explain based on the image below I did to make it easier to understand.

In the image below I have a banner (gray color) and other larger in red color.

The operation would be as follows: When passing the mouse strokes over the gray color banner, it would open the red color banner. But, always the red banner would open in the same coordinate (position) independent of the size of the gray banner, as you can see below.

I hope you can help me.

Thank you very much!

Answer 1

You can use position:fixed; to always keep an element in the same position on the screen. Here is an example, hover the mouse in the gray area to display the red banner. I hope I helped :D

$("document").ready(function (){
  $(".cinza").mouseenter(function (){
     $(".vermelho").show();
  })
  
  $(".cinza").mouseleave(function (){
     $(".vermelho").hide();
  })
})

.container{
  display:block;
}

.cinza{
  width:100%;
  height:50px;
  background:gray;
}

.vermelho{
  position:fixed;
  top:0;
  left:50%;
  width:100px;
   height:100px;
  background:red;
  display:none;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="cinza"></div>
  <div class="vermelho"></div>
</div>