Absolute Position for pop-up in HTML CSS

I am trying to get Absolute positioning to work. I have two DIVs that pop up as 'Blurbs' when there is a mouseover event on their respective Labels with text saying "Link". I want blurbs to pop up 'near' their respective "Links" where the mouseover event occurs (CASE 3 of image). I have put the position of both these .DV_BlrB as absolute, and two cases happen. If I dont specify the top / bottom / left / right properties, then the blurbs pop-up somewhat close to the Labels (CASE 1 of image), but of course, I want to adjust where they are appearing, so I play with the 'Left', 'top' etc properties. but when i do specify e.g. left: 100; both the blurbs end up appearing clubbed together on the left side, like in CASE 2 of image. Seems like the positioning properties are not referencing their immediate .Div_FLEX_COL divs, but rater some parent div once I specify position numbers. What could be the problem? Any help much appreciated.

FYI All elements except for .Main_Big_Div (anchor) are dynamically generated.

HTML

<div class="Main_Big_Div">      <div class="Div_FLEX_ROW">            <div class="Div_FLEX_COL">              text              elements              elements              <label id="lbl1" class="label_l">Link</label>                  <div id="dv_lbl1" class="DV_BlrB">                                lorem ipsum                  </div>                </div>            <div class="Div_FLEX_COL">              text              elements              elements              <label id="lbl2" class="label_l">Link</label>                  <div id="dv_lbl2" class="DV_BlrB">                                lorem ipsum                  </div>          </div>      </div>  </div>  

JQUERY

$('#Main_Big_Div').on('mouseenter','.label_l', function(e){                           var id_BlrB = "#dv_" + $(this).attr('id');                                        $(id_BlrB).css('display','block');                      });    $('#Main_Big_Div').on('mouseleave','.label_l', function(e){                           var id_BlrB = "#dv_" + $(this).attr('id');                        $(id_BlrB).css('display','none');                      });  

CSS

.DV_BlrB  {   display: none;      position: absolute; /* static;  absolute;  */      left: 10;   /* CASE 2 of picture   */  /*  right: ; */  /*  top: 10; */  /*  bottom: 10; */      width: 150px;   height: 40px;      border-radius:5px;      border: 2px solid #56cfe1;                                        background-color: #f8f9fa;                                        font-size: 0.7rem; color: #f343a40;      font: italic;  }    .Div_FLEX_ROW  {flex-direction: row;  justify-content: stretch;  }    .Div_FLEX_COL  {flex-direction: column;  }  

https://stackoverflow.com/questions/66764014/absolute-position-for-pop-up-in-html-css March 23, 2021 at 09:21PM