如何将弹出窗口放置在使用 css 和 javascript 触发它的按钮旁边？

Question

我目前正在动态创建 x 个 div，在每个 div 中，我有一个按钮，只要单击它就会显示一个弹出窗口。

我试图将按钮放置在触发它的特定按钮下方，但出于某种原因，弹出窗口的位置始终是静态的，它不会移动到按钮下方。

<div className="popWrap">
    <div className="popup" id="pop" style={{display: 'none'}}>
            <Card className="myCardStyle"> 
               <CardHeader>hello</CardHeader>
               <CardBody>body</CardBody>
            </Card>
    </div>  
    <button className="myBtn" onClick={this.displayBtn}>View Button Info</button>
</div>

这是我的 css:

.myCardStyle {
width: 100%;
 }

.popup {
   z-index: 10000;
 }

.popwrap{
   border:1px solid pink;
   padding:1px;
   position: inherit;
   display:inline-block;
 }

谁能提出解决方案？提前致谢！

Answer 1

您可以将 position: relative; 添加到 .popWrap div。然后您可以将 position: absolute; 设置为 .popup 元素并为其指定一个特定的（顶部）位置以将其移动到您想要的位置。

示例：

.popup {
   position: absolute;
   top: 50px;
   z-index: 10000;
 }

.popWrap {
   position: relative;
   border: 1px solid pink;
   padding: 1px;
   display: inline-block;
 }

如何将弹出窗口放置在使用 css 和 javascript 触发它的按钮旁边？

How to position a popup beside the button that triggered it with css and javascript?

html

javascript

css

popup