HTML CSS 中弹出窗口的绝对位置

Question

我正在尝试让绝对定位发挥作用。我有两个 DIV，当它们各自的标签上出现鼠标悬停事件并显示文本“Link”时，它们会弹出 'Blurbs'。我希望广告在鼠标悬停事件发生的地方弹出 'near' 它们各自的“Links”（图像的案例 3）。我将这两个 .DV_BlrB 的位置都设置为绝对位置，并且会发生两种情况。如果我不指定 top / bottom / left / right 属性，那么弹出的广告会有点接近标签（图像的案例 1），但当然，我想调整它们出现的位置，所以我玩'Left'、'top' 等属性。但是当我指定例如left: 100; 两个导语最终都出现在左侧，就像图像的案例 2 一样。似乎定位属性没有引用它们的直接 .Div_FLEX_COL div，而是在我指定位置编号后对某些父 div 进行评分。可能是什么问题呢？非常感谢任何帮助。

仅供参考，除了 .Main_Big_Div（锚）之外的所有元素都是动态生成的。

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

Answer 1

当您设置 left:100px 时，它被设置为与其最近的亲戚父项相关。要解决此问题，请使用：

.Div_FLEX_COL{ 
    position: relative;
 }

HTML CSS 中弹出窗口的绝对位置

Absolute Position for pop-up in HTML CSS

html

css

jquery

css-position