I am currently dynamically creating x number of divs and within each div, I have a button that shows a popup whenever clicked.

I am trying to position the button below the specific button that triggered it but the position of the popup is always static for a reason, it does not move below the button.

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

Anyone can suggest a solution? Thanks in advance!

I am currently dynamically creating x number of divs and within each div, I have a button that shows a popup whenever clicked.

I am trying to position the button below the specific button that triggered it but the position of the popup is always static for a reason, it does not move below the button.

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

Anyone can suggest a solution? Thanks in advance!

• javascript
• html
• css
• popup

Share Improve this question Follow asked Jun 15, 2021 at 8:49 purplewindpurplewind 36111 gold badge1111 silver badges2626 bronze badges 2

• Please create a proper minimal reproducible example. – user5734311 Commented Jun 15, 2021 at 8:51
• Duplicate: Position one element relative to another in CSS – user5734311 Commented Jun 15, 2021 at 9:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You could add position: relative; to the .popWrap div. Then you can set position: absolute; to the .popup element and give it a specific (top) position to move it where you want it to be.

Example:

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

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