Search code examples
htmljquerycsscss-position

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;
}

Appearances

Solution

  • When you set left:100px it is set related to its nearest relative parent. To remove the problem use this:

    .Div_FLEX_COL{ 
    position: relative;
 }