Configuration position

An object defining overlay positioning options.

Type: Object

The postion option takes on an object containing the following fields: my, at and of. Look at the following sentence to see how to use these fields to position the required element against the target element.

"Place my 'left' side at the 'left bottom' corner of the '#targetElement'." The italic quoted phrase located after each option name within the sentence represents a value of the appropriate option.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<p style="text-align:center"><b>Position</b></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">my</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value: myValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">at</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value:atValue }"></div>
  </div>
</div>
<div id="targetElement"></div>
<div id="overlay" data-bind="dxOverlay: {
  visible: overlayVisible,
  clickAction: hideOverlay, 
  height: 90,
  width: 200,
  position: {
    my: myValue(),
    at: atValue(),
    of: $('#targetElement'),
  }
}">
  <div class="overlayContents">
    <p>The overlay window text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide overlay', clickAction: hideOverlay }"></div>
  </div>
</div>
overlayVisible = ko.observable(false);
atValue = ko.observable("bottom");
myValue = ko.observable("bottom");
showOverlay = function () {
  overlayVisible(true);
};
hideOverlay = function () {
  overlayVisible(false);
};
positionValues = [
  "left top",
  "top",
  "right top",
  "right",
  "right bottom",
  "bottom",
  "left bottom",
  "left",
  "center"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.overlayContents{
  color: darkblue;
  background-color:darkorange;
  border-radius: 15px;
  height:100%;
}
#targetElement {
  margin-top: 40px;
  display: inline-block;
  width: 80%;
  height: 170px;
  border-style: solid;
  background-color: lightgreen;
}

at

The target element position that the widget is positioned against.

Type: String
Default Value: "center"
Accepted Values: 'left'|'center'|'right'|'top'|'bottom'

The at option can take on a string value consisting of vertical and horizontal position specifiers separated by a space (e.g., "top left"). The default value for each position specifier is "center". If you assign the "left" value to this option, it will be converted to the "left center" value.

my

The position of the widget to align against the target element.

Type: String
Default Value: "center"
Accepted Values: 'left'|'center'|'right'|'top'|'bottom'

The my option can take on a string value consisting of vertical and horizontal position specifiers separated by a space (e.g., "top left"). The default value for each position specifier is "center". If you assign the "left" value to the option, it will be converted to the "left center" value.

of

The target element that the widget is postioned against.

Type: Object
Default Value: window