I am currently generating a dynamic quantity of divs, each containing a button that triggers a popup when clicked. I am attempting to position the popup below the specific button that activated it, but it remains static and does not move accordingly.
<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>
Here is my css:
.myCardStyle {
width: 100%;
}
.popup {
z-index: 10000;
}
.popwrap{
border:1px solid pink;
padding:1px;
position: inherit;
display:inline-block;
}
If you have any insights or suggestions for a solution, they would be greatly appreciated. Thank you!