How to leave buttons fixed in floating div

Question

I have in my system a situation similar to the one I gave of example. A modal bootstrap that can open in basically any place of the screen. This modal does not occupy every screen. Within this modal, some records are listed, according to the context. In this modal, I have a div with the record maintenance buttons (edit, delete, include, etc.). I would like this div with the buttons to always be in the lower right corner of the modal, fixed (because the modal is scrollable, according to the number of records), but I’m not able to do. I’ve tried to put position: fixed and a margin-left calculated at the time, but did not work as I wanted

.botoes-modal{
width: 120px; 
height: 40px; 
background-color: green; 
}

<div style="overflow-y: auto; height: 200px;">
<table>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
</table>
<div id="botoes-acao" class="botoes-modal">
  Clique para editar
</div>
</div>

Answer 1

Note that if you want to position an element relative to your parent or predecessor shall use position:absolute, with the position:fixed the element is positioned relative to the browser window, thus, to position the div of the action buttons, knowing that the div can appear anywhere on the screen, we should always think of your position with respect to your parent then in the event that is called when the modal is displayed we can position the div of buttons based on position top and left modal. The fixed value "160" serves only for this example, you must identify which value to use in your modal, add the height of the modal does not work in this case.

Note that I left the code of the commented event, the code is very self-explanatory, I hope it helps. Follow a snippet of example:

/*$("#modal").on('show', function(event){
     posicionaBotoes();
});*/

$(document).ready(function() {
  posicionaBotoes();
});

function posicionaBotoes() {
  var modal = $("#modal");
  $(".botoes-modal").css('right', modal.offset().left);
  $(".botoes-modal").css('top', modal.offset().top + 160);
}

.botoes-modal {
  width: 120px;
  height: 40px;
  background-color: green;
  float: right;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  id="modal" style="overflow-y: auto; height: 200px; border:1px solid red;">
<table>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
</table>
<div id="botoes-acao" class="botoes-modal">
  Clique para editar
</div>
</div>

Answer 2

Here’s an idea. Using position fixed within a absolute.

#modal {
  position: relative;
  width: 100%;
}

#absolute {
  position: absolute;
  bottom: 40px;
  right: 120px;
}

#botoes-acao {
  position: fixed; /* não defina top/bottom/left/right */
  width: 120px;
  height: 40px;
  background-color: green;
}

<div id="modal" style="overflow-y: auto; height: 200px; border:1px solid red;">
  <table>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
  </table>
  <div id="absolute">
    <div id="botoes-acao" class="botoes-modal">
      Clique para editar
    </div>
  </div>
</div>

Answer 3

Hello!

Set the div "PAI" that is 200px high with position: relative;

In the div with the buttons, set the position Fixed but leave the bottom reset. So the button will always be fixed in the footer of the DIV. To fully align right, use right: 0.

Always remember to use the top, left, bottom right properties when using the position property.

The code will look like this:

<div style="overflow-y: auto; height: 200px; position: relative;">

.botoes-modal {
width: 120px;
height: 40px;
background-color: green;
position: fixed;
bottom: 0;
right: 0; }