# .position()
Categories: [Method Overrides](http://www.css88.com/jquery-ui-api/category/overrides/ "View all posts in Method Overrides") | [Methods](http://www.css88.com/jquery-ui-api/category/methods/ "View all posts in Methods") | [Utilities](http://www.css88.com/jquery-ui-api/category/utilities/ "View all posts in Utilities")
## .position( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery)version added: 1.8
**Description:** 相對另一個元素定位一個元素。
* #### [.position( options )](#position-options)
* **options**Type: [Object](http://api.jquery.com/Types/#Object)
* **my**(默認值:`"center"`)
類型:String
描述:定義**被定位元素上**對準目標元素的位置:"horizontal vertical" 對齊方式。一個單一的值,比如 "right" 將規范為 "right center","top" 將規范為 "center top"(下面的 CSS 公約)。可接受的水平值:"left"、"center"、"right"。可接受的垂直值:"top"、"center"、"bottom"。例如,"left top" 或 "center center"。每個緯度也可以包含偏移,以像素計或以百分比計,例如 "right+10 top-25%"。百分比偏移是相對于被定位的元素。
* **at**(默認值:`"center"`)
類型:String
描述:定義**目標元素上**對準被定位元素的位置: "horizontal vertical" 對齊方式。如需了解更多細節請查看 my 選項上的可能值。百分比偏移是相對于目標元素。
* **of**(默認值:`null`)
類型:Selector 或 Element 或 jQuery 或 Event
描述:要定位的元素。如果您提供一個選擇器(Selector)或 jQuery 對象,將使用第一個匹配元素。如果您提供一個事件(Event)對象,將使用 pageX 和 pageY 屬性,例如 "#top-menu"。
* **collision**(默認值:`"flip"`)
類型:String
描述:當被定位元素在某些方向上溢出窗口,則移動它到另一個位置。與 my 和 at 選項相似,該選項會接受一個單一的值或一對 horizontal/vertical 值。例如:"flip"、"fit"、"fit flip"、"fit none"。
* "flip":翻轉元素到目標的相對一邊,再次運行 collision 檢測一遍查看元素是否適合。無論哪一邊允許更多的元素可見,則使用那一邊。
* "fit":把元素從窗口的邊緣移開。
* "flipfit":首先應用 flip 邏輯,把元素放置在允許更多元素可見的那一邊。然后應用 fit 邏輯,確保盡可能多的元素可見。
* "none":不應用任何 collision 檢測。
* **using**(默認值:`null`)
類型:Function()
描述:當指定了該選項,實際屬性設置則委托給該回調。接受兩個參數:第一個是位置 top 和 left 值的哈希,可被轉發到 .css() 或 .animate();第二個提供了關于兩個元素的位置和尺寸的反饋,同時也計算它們的相對位置。target 和 element 都有下列屬性:element、left、top、width、height。另外,還有 horizontal、vertical 和 important,提供了十二個可能的方向,如 { horizontal: "center", vertical: "left", important: "horizontal" }。
* **within**(默認值:`window`)
類型:Selector 或 Element 或 jQuery
描述:元素定位為 within,會影響 collision 檢測。如果您提供了一個選擇器(Selector)或 jQuery 對象,則使用第一個匹配的元素。
jQuery UI `.position()` 方法允許您相對窗體(window)、文檔、另一個元素或指針(cursor)/鼠標(mouse)來定位一個元素,無需考慮相對父元素的偏移(offset)。
注釋:jQuery UI 不支持定位隱藏元素。
這是一個獨立的 jQuery 插件,且對其他 jQuery UI 組件沒有依賴關系。
該插件擴展自 jQuery 內置的 [.position()](//api.jquery.com/position) 方法。如果 jQuery UI 未加載,調用 `.position()` 方法不會直接失敗,因為該方法在 jQuery 中存在。但是不會發生預期的行為。
## Example:
#### 一個簡單的 jQuery UI 定位(Position)實例。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: green;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="targetElement">
<div class="positionDiv" id="position1"></div>
<div class="positionDiv" id="position2"></div>
<div class="positionDiv" id="position3"></div>
<div class="positionDiv" id="position4"></div>
</div>
<script>
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right center",
at: "right bottom",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget