jQuery UI position()

Question

I cant figure out how to position an element using jQuery ui position()

for example:

  $("#element").position({
        my: 'center top',
        at: 'center top',
        of: '.content' 
    });

this works and element is position top center of parent, but this

  $("#element").position({
        my: 'center bottom',
        at: 'center bottom',
        of: '.content' 
    });

does not work. The same goes for bottom left and bottom right.

I have created jsbin https://jsbin.com/kuzaketaqi/edit?html,js,output

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent'
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000;position:relative">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0;position:absolute;top:10px;left:10px"></button>
</div>

Answer 1

When the full height of #parent is not visible in the browser viewport, the bottom positions may not work - give within: '#parent' parameter (the default is window and the positioning will be restricted to the viewport!)

See demo below:

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent',
    within: '#parent'
  });
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0"></button>
</div>