如何相对于包含动态文本的父div定位div？

Question

我正在处理要求单击某些文本（这是一个动态文本，其长度可以变化）时需要显示弹出消息的要求，正在尝试实现以下屏幕快照中所示的内容。

但是面临的问题是，如果我将文本更改为较长或较短的位置来定位它，则弹出窗口仍保留在同一位置时，无论文本长度如何，我都希望它相对于“ *”定位（在此示例中：4小时内准备就绪）

HTML：

 <div class="bopis-messaging">
   <a href="">Ready within 7 Days *</a>
     <div class="bopis-msg-content" data-layout="small">                        
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e 
           iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim 
           ad minim veniam, quis nostrud
     </div>
</div>


    <style>
    .bopis-messaging {
       position: relative
    }
    .bopis-msg-content {
     width: 180px;
     border: 1px solid #333;
     position: absolute;
     right: 30%;
     top: -23%;
     height: auto;
     background: #ffffff;
     color: #333333;    
     font-family: Lato; 
     font-size: 12px;   
     line-height: 20px;
     padding: 16px;
   }
   </style>

它给了我这个结果，但是如果尝试将文本更改为“ 4小时内就绪”，则弹出窗口仍停留在相同位置，而我希望它位于“ ” 上方 。

您的帮助将不胜感激

Answer 1

如果您的“ *”始终位于文本的末尾，则可以这样解决：（请在css中查看我的评论）。

 <div class="container"> <!--Just a bunch of br element to place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution--> <div class="bopis-messaging"> <a href="">Ready within 7 Days *</a> <div class="bopis-msg-content" data-layout="small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud </div> </div> </div> <style> .bopis-messaging { margin-top: 300px; /*place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution*/ position: relative; display: inline-block; /* Important so that the container will dynamically fit to the size of the content */ } .bopis-msg-content { width: 180px; border: 1px solid #333; position: absolute; left: 100%; /*Place it at the end of the parent element */ margin-left: -116px; /*half of width (this also includes the padding) to place the box back so its at the center of the "*" NB*/ bottom: 200%; /*Place it above */ height: auto; background: #ffffff; color: #333333; font-family: Lato; font-size: 12px; line-height: 20px; padding: 16px; } /*Added a triangle:*/ .bopis-msg-content:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: solid 15px #000; border-left: solid 15px transparent; border-right: solid 15px transparent; } </style> 

Answer 2

一种不错的方法是在html上使用data-attribute，然后通过伪元素content属性显示它们。

 /*just for the SO snippet positioning*/ .bopis-messaging { margin: 140px; } /* stablishes that any anchor tag with a data-tooltip attibute /* will be relative positioned, so the pseudo-element will be /* absolute positioned accordingly*/ a[data-tooltip] { position: relative; } /* displays a tooltip as an absolute positioned pseudo-element, /* which contents are in the data-tooltip html attribute /* starts as zero-scaled for a fancy display on hover*/ a[data-tooltip]::after { content: attr(data-tooltip); display: block; position: absolute; width: 180px; border: 1px solid #333; background: #ffffff; color: #333333; font-family: Lato; font-size: 12px; line-height: 20px; padding: 16px; bottom: 100%; right: 0; transform-origin:bottom; transform: translate(50%, 0) scale(0); transition: transform 200ms ease-out; } /*reveals the tooltip on hover*/ a[data-tooltip]:hover::after { transform: translate(50%, 0) scale(1); } 

 <div class="bopis-messaging"> <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud">Ready within 7 Days *</a> <br> <a href="" data-tooltip="shorter lorem ipsum is shorter">longer text is longer is longer is longer *</a> <br> <a href="" data-tooltip="shorter lorem ipsum is shorter">short text *</a> </div> 

---

编辑：由于您指定了其他要求，所以这里是一个带有隐藏div的版本，因为CSS伪元素“ content”将不会解析数据仓库中的HTML

 /*just for SO snippet positioning*/ .bopis-messaging { margin:170px; } .bopis-hoverable{ position:relative; display:inline; } /* displays a tooltip as an absolute positioned element, /* starts as zero-scaled for a fancy display on hover*/ .bopis-msg-content { display: block; position: absolute; width: 230px; border: 1px solid #333; background: #ffffff; color: #333333; font-family: Lato; font-size: 12px; line-height: 20px; padding: 10px; bottom: 100%; right: 0; transform-origin:bottom; transform: translate(50%, 0) scale(0); transition: transform 200ms ease-out; } /*reveals the tooltip on hover*/ .bopis-hoverable:hover > .bopis-msg-content{ transform: translate(50%, 0) scale(1); } 

 <div class="bopis-messaging"> <div class="bopis-hoverable"> <a href="#">Ready within 7 Days *</a> <div class="bopis-msg-content" data-layout="small"> <h4>Ready within 7 Days</h4> <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod <br> ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud</p> </div> </div> </div> 

Answer 3

这里是jsfiddle看看。

<div class="bopis-messaging">
   <a href="">Ready within 4  Business Business Business Hours *</a>
     <div class="bopis-msg-content" data-layout="small">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud
     </div>
</div>

的CSS

    .bopis-messaging {
       position: relative;
       margin-top: 150px;
       display: inline-block;
    }
    .bopis-msg-content {
     width: 180px;
     border: 1px solid #333;
     position: absolute;
     right: -100px;
     bottom: 150%;
     height: auto;
     background: #ffffff;
     color: #333333;    
     font-family: Lato; 
     font-size: 12px;   
     line-height: 20px;
     padding: 16px;
   }

Answer 4

尝试这个

 .bopis-messaging { position: relative; display: inline-block; } .margin-top-200 { margin-top:200px; } .bopis-msg-content { width: 180px; border: 1px solid #333; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; background: #ffffff; color: #333333; font-family: Lato; font-size: 12px; line-height: 20px; padding: 16px; } 

 <div class="margin-top-200"></div> <div class="bopis-messaging"> <a href="">Ready within 7 Days *</a> <div class="bopis-msg-content" data-layout="small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud </div> </div>