Download raw (19.4 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI position documentation</title>
<style>
body {
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
}
.gutter {
display: none;
}
</style>
</head>
<body>
<script>{
"title":
".position()",
"excerpt":
"Position an element relative to another.",
"termSlugs": {
"category": [
"methods","overrides","utilities"
]
}
}</script><article id="position1" class="entry method"><h2 class="section-title">
<span class="name">.position( options )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span><span class="version-details">version added: 1.8</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Position an element relative to another.</p>
<ul class="signatures"><li class="signature" id="position-options">
<h4 class="name">.position( options )</h4>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div>
<strong>my</strong> (default: <code>"center"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>Defines which position <strong>on the element being positioned</strong> to align with the target element: "horizontal vertical" alignment. A single value such as <code>"right"</code> will be normalized to <code>"right center"</code>, <code>"top"</code> will be normalized to <code>"center top"</code> (following CSS convention). Acceptable horizontal values: <code>"left"</code>, <code>"center"</code>, <code>"right"</code>. Acceptable vertical values: <code>"top"</code>, <code>"center"</code>, <code>"bottom"</code>. Example: <code>"left top"</code> or <code>"center center"</code>. Each dimension can also contain offsets, in pixels or percent, e.g., <code>"right+10 top-25%"</code>. Percentage offsets are relative to the element being positioned.</div>
</li>
<li>
<div>
<strong>at</strong> (default: <code>"center"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>Defines which position <strong>on the target element</strong> to align the positioned element against: "horizontal vertical" alignment. See the <a href="#option-my"><code>my</code></a> option for full details on possible values. Perecentage offsets are relative to the target element.</div>
</li>
<li>
<div>
<strong>of</strong> (default: <code>null</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div>Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the <code>pageX</code> and <code>pageY</code> properties will be used. Example: <code>"#top-menu"</code>
</div>
</li>
<li>
<div>
<strong>collision</strong> (default: <code>"flip"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>
<p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to <a href="#option-my"><code>my</code></a> and <a href="#option-at"><code>at</code></a>, this accepts a single value or a pair for horizontal/vertical, e.g., <code>"flip"</code>, <code>"fit"</code>, <code>"fit flip"</code>, <code>"fit none"</code>.</p>
<ul>
<li>
<code>"flip"</code>: Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.</li>
<li>
<code>"fit"</code>: Shift the element away from the edge of the window.</li>
<li>
<code>"flipfit"</code>: First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.</li>
<li>
<code>"none"</code>: Does not apply any collision detection.</li>
</ul>
</div>
</li>
<li>
<div>
<strong>using</strong> (default: <code>null</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
<div>
When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of <code>top</code> and <code>left</code> values for the position that should be set and can be forwarded to <code>.css()</code> or <code>.animate()</code>.
<p>The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both <code>target</code> and <code>element</code> have these properties: <code>element</code>, <code>left</code>, <code>top</code>, <code>width</code>, <code>height</code>. In addition, there's <code>horizontal</code>, <code>vertical</code> and <code>important</code>, giving you twelve potential directions like <code>{ horizontal: "center", vertical: "left", important: "horizontal" }</code>.</p>
</div>
</li>
<li>
<div>
<strong>within</strong> (default: <code>window</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>Element to position within, affecting collision detection. If you provide a selector or jQuery object, the first matching element will be used.</div>
</li>
</ul>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>The jQuery UI <code>.position()</code> method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.</p>
<p><em>Note: jQuery UI does not support positioning hidden elements.</em></p>
<p>This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.</p>
<p>This plugin extends jQuery's built-in <a href="http://api.jquery.com/position"><code>.position()</code></a> method. If jQuery UI is not loaded, calling the <code>.position()</code> method may not fail directly, as the method still exists. However, the expected behavior will not occur.</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Position example.</span></h4>
<div class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div><div class="line number42 index41 alt1">42</div><div class="line number43 index42 alt2">43</div><div class="line number44 index43 alt1">44</div><div class="line number45 index44 alt2">45</div><div class="line number46 index45 alt1">46</div><div class="line number47 index46 alt2">47</div><div class="line number48 index47 alt1">48</div><div class="line number49 index48 alt2">49</div><div class="line number50 index49 alt1">50</div><div class="line number51 index50 alt2">51</div><div class="line number52 index51 alt1">52</div><div class="line number53 index52 alt2">53</div><div class="line number54 index53 alt1">54</div><div class="line number55 index54 alt2">55</div><div class="line number56 index55 alt1">56</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain"><!doctype html></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>position demo</</code><code class="keyword">title</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">></code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">style</code><code class="plain">></code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain">.positionDiv {</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain">position: absolute;</code></div><div class="line number10 index9 alt1"><code class="undefined spaces"> </code><code class="plain">width: 75px;</code></div><div class="line number11 index10 alt2"><code class="undefined spaces"> </code><code class="plain">height: 75px;</code></div><div class="line number12 index11 alt1"><code class="undefined spaces"> </code><code class="plain">background: green;</code></div><div class="line number13 index12 alt2"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number14 index13 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">style</code><code class="plain">></code></div><div class="line number15 index14 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number16 index15 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number17 index16 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number18 index17 alt1"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number19 index18 alt2"> </div><div class="line number20 index19 alt1"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"targetElement"</code><code class="plain">></code></div><div class="line number21 index20 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"positionDiv"</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"position1"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number22 index21 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"positionDiv"</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"position2"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number23 index22 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"positionDiv"</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"position3"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number24 index23 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"positionDiv"</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"position4"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number25 index24 alt2"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number26 index25 alt1"> </div><div class="line number27 index26 alt2"><code class="plain"><</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number28 index27 alt1"><code class="plain">$( "#position1" ).position({</code></div><div class="line number29 index28 alt2"><code class="undefined spaces"> </code><code class="plain">my: "center",</code></div><div class="line number30 index29 alt1"><code class="undefined spaces"> </code><code class="plain">at: "center",</code></div><div class="line number31 index30 alt2"><code class="undefined spaces"> </code><code class="plain">of: "#targetElement"</code></div><div class="line number32 index31 alt1"><code class="plain">});</code></div><div class="line number33 index32 alt2"> </div><div class="line number34 index33 alt1"><code class="plain">$( "#position2" ).position({</code></div><div class="line number35 index34 alt2"><code class="undefined spaces"> </code><code class="plain">my: "left top",</code></div><div class="line number36 index35 alt1"><code class="undefined spaces"> </code><code class="plain">at: "left top",</code></div><div class="line number37 index36 alt2"><code class="undefined spaces"> </code><code class="plain">of: "#targetElement"</code></div><div class="line number38 index37 alt1"><code class="plain">});</code></div><div class="line number39 index38 alt2"> </div><div class="line number40 index39 alt1"><code class="plain">$( "#position3" ).position({</code></div><div class="line number41 index40 alt2"><code class="undefined spaces"> </code><code class="plain">my: "right center",</code></div><div class="line number42 index41 alt1"><code class="undefined spaces"> </code><code class="plain">at: "right bottom",</code></div><div class="line number43 index42 alt2"><code class="undefined spaces"> </code><code class="plain">of: "#targetElement"</code></div><div class="line number44 index43 alt1"><code class="plain">});</code></div><div class="line number45 index44 alt2"> </div><div class="line number46 index45 alt1"><code class="plain">$( document ).mousemove(function( event ) {</code></div><div class="line number47 index46 alt2"><code class="undefined spaces"> </code><code class="plain">$( "#position4" ).position({</code></div><div class="line number48 index47 alt1"><code class="undefined spaces"> </code><code class="plain">my: "left+3 bottom-3",</code></div><div class="line number49 index48 alt2"><code class="undefined spaces"> </code><code class="plain">of: event,</code></div><div class="line number50 index49 alt1"><code class="undefined spaces"> </code><code class="plain">collision: "fit"</code></div><div class="line number51 index50 alt2"><code class="undefined spaces"> </code><code class="plain">});</code></div><div class="line number52 index51 alt1"><code class="plain">});</code></div><div class="line number53 index52 alt2"><code class="plain"></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number54 index53 alt1"> </div><div class="line number55 index54 alt2"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number56 index55 alt1"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></code></div></div></td></tr></tbody></table></div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>
</body>
</html>