jQuery如何设置div相对于另一个div的位置？

Question

I am having below two divs inmy html,

<div id="chart-2" class="graph"></div>
<div id="chart2Buttons"></div>

First div represents the graph which I am plotting using highchart.js while second represents the buttons which I am supposed to place under first div as show in below image.

Can you please help how can I achieve this to place my second div at the bottom-right corner of first div?

Thanks

Answer 1

Add css rule:

#chart2Buttons {
    display: inline-block;
    float: right;
}

Answer 2

Try this CSS:

#chart-2{
  position:relative;
}

#chart2Buttons{
   position:absolute:
   bottom:1px;
   right:1px;
}

Answer 3

Add a wrapper div to the chart and button and set the display to inline-block and position relative for the wrapper. Position absolute the button and place it at bottom corner as below

 .graph{ width: 400px; height: 400px; background: crimson; line-height: 400px; text-align: center; color: white; font-size: 20px; } .wrapper{ position:relative; display: inline-block; } #chart2Buttons{ position: absolute; width: 40px; height: 40px; right: 0; bottom: 0; background: cornflowerblue; color: white; line-height: 40px; text-align: center; } 

 <div class="wrapper"> <div id="chart-2" class="graph"> GRAPH </div> <div id="chart2Buttons">B</div> </div>