Positioning with a function

We can set the using option to a function, and position the positioned element manually. Change the configuration so that it appears as follows:

$(".ui-positioned-element").position({
  of: ".ui-positioning-element",
  my: "right bottom",
  at: "right bottom",
  using: function(pos) {
    $(this).css({
      backgroundColor: "#fc7676",
      top: pos.top,
      left: pos.left
    });
  }
});

Save this change as positionFunction.html. We supply an anonymous function as the value of the using option. This function is passed as a single argument that is an object containing the properties top and left, which correspond to the values that the element we are positioning should be given.

As you can see from this code, we still need to position the element manually, but the function allows us to do any preprocessing of the element that may be required. Within the function, the this object is set to the element being positioned.