[英]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".我有两个 DIV,当它们各自的标签上出现鼠标悬停事件时,它们会以“Blurbs”的形式弹出,并带有“链接”的文字。 I want blurbs to pop up 'near' their respective "Links" where the mouseover event occurs (CASE 3 of image).我希望在鼠标悬停事件发生的地方弹出“靠近”它们各自的“链接”(图像的案例 3)。 I have put the position of both these .DV_BlrB
as absolute, and two cases happen.我已将这两个 .DV_BlrB 的.DV_BlrB
设为绝对值,并且发生了两种情况。 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.如果我不指定顶部/底部/左侧/右侧属性,那么会弹出一些接近标签的宣传信息(图像的案例 1),但当然,我想调整它们出现的位置,所以我玩'Left'
、 'top'
等属性。 but when i do specify eg left: 100;
但是当我指定例如left: 100;
both the blurbs end up appearing clubbed together on the left side, like in CASE 2 of image.两个简介最终都出现在左侧,就像在图像的案例 2 中一样。 Seems like the positioning properties are not referencing their immediate .Div_FLEX_COL
divs, but rater some parent div once I specify position numbers.似乎定位属性没有引用它们的直接.Div_FLEX_COL
div,但是一旦我指定 position 数字,就会评估一些父 div。 What could be the problem?可能是什么问题呢? Any help much appreciated.非常感谢任何帮助。
FYI All elements except for .Main_Big_Div
(anchor) are dynamically generated.仅供参考,除.Main_Big_Div
(锚)之外的所有元素都是动态生成的。
HTML 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 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 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;
}
When you set left:100px
it is set related to its nearest relative parent.当您设置left:100px
时,它设置为与其最近的相对父级相关。 To remove the problem use this:要消除问题,请使用:
.Div_FLEX_COL{
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.