{"id":52,"date":"2023-08-25T17:42:07","date_gmt":"2023-08-25T17:42:07","guid":{"rendered":"\/\/api.jqueryui.com\/1.8\/?p=52"},"modified":"2023-08-25T17:42:07","modified_gmt":"2023-08-25T17:42:07","slug":"position","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.8\/position\/","title":{"rendered":".position()"},"content":{"rendered":"<article id=\"position1\" class=\"entry method\"><h2 class=\"section-title\">\n<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>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Position an element relative to another.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\"><a id=\"position-options\" href=\"#position-options\"><span class=\"icon-link\"><\/span>.position( options )<\/a><\/h4>\n<ul><li id=\"position-options-options\">\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<ul>\n<li>\n<div>\n<strong>my<\/strong> (default: <code>&quot;center&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>Defines which position <strong>on the element being positioned<\/strong> to align with the target element: &quot;horizontal vertical&quot; alignment. A single value such as <code>&quot;right&quot;<\/code> will be normalized to <code>&quot;right center&quot;<\/code>, <code>&quot;top&quot;<\/code> will be normalized to <code>&quot;center top&quot;<\/code> (following CSS convention). Acceptable horizontal values: <code>&quot;left&quot;<\/code>, <code>&quot;center&quot;<\/code>, <code>&quot;right&quot;<\/code>. Acceptable vertical values: <code>&quot;top&quot;<\/code>, <code>&quot;center&quot;<\/code>, <code>&quot;bottom&quot;<\/code>. Example: <code>&quot;left top&quot;<\/code> or <code>&quot;center center&quot;<\/code>.<\/div>\n<\/li>\n<li>\n<div>\n<strong>at<\/strong> (default: <code>&quot;center&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>Defines which position <strong>on the target element<\/strong> to align the positioned element against: &quot;horizontal vertical&quot; alignment. See the <a href=\"#option-my\"><code>my<\/code><\/a> option for full details on possible values.<\/div>\n<\/li>\n<li>\n<div>\n<strong>of<\/strong> (default: <code>null<\/code>)<\/div>\n<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>\n<\/div>\n<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>&quot;#top-menu&quot;<\/code>\n<\/div>\n<\/li>\n<li>\n<div>\n<strong>offset<\/strong> (default: <code>null<\/code>)<\/div>\n<div>Type: <\/div>\n<div>Distance in pixels to adjust the position of the element horizontally and vertically, e.g. <code>&quot;10 50&quot;<\/code>. A single value such as <code>&quot;50&quot;<\/code> will apply to both directions.<\/div>\n<\/li>\n<li>\n<div>\n<strong>collision<\/strong> (default: <code>&quot;flip&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>\n\t\t\t\t\t<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>&quot;flip&quot;<\/code>, <code>&quot;fit&quot;<\/code>, <code>&quot;fit flip&quot;<\/code>, <code>&quot;fit none&quot;<\/code>.<\/p>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n<code>&quot;flip&quot;<\/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>\n\t\t\t\t\t\t<li>\n<code>&quot;fit&quot;<\/code>: Shift the element away from the edge of the window.<\/li>\n\t\t\t\t\t\t<li>\n<code>&quot;none&quot;<\/code>: Does not apply any collision detection.<\/li>\n\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>using<\/strong> (default: <code>null<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>\n\t\t\t\t\tWhen specified, the actual property setting is delegated to this callback. Receives a hash of <code>top<\/code> and <code>left<\/code> values for the position that should be set and can be forwarded to <code>.position()<\/code> or <code>.animate()<\/code>.\n\t\t\t\t<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<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>\n\t\t<p><em>Note: jQuery UI does not support positioning hidden elements.<\/em><\/p>\n\t\t<p>This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.<\/p>\n\t\t<p>This plugin extends jQuery&apos;s built-in <a href=\"\/\/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>\n\t<\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>A simple jQuery UI Position example.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>position demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.8.24\/themes\/base\/jquery-ui.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.positionDiv<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">position<\/span>: absolute;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">75px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">75px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background<\/span>: green;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.8.2.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.8.24\/jquery-ui.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;targetElement&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;positionDiv&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;position1&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;positionDiv&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;position2&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;positionDiv&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;position3&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;positionDiv&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;position4&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#position1&quot;<\/span> ).position({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">my<\/span>: <span class=\"hljs-string\">&quot;center&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">at<\/span>: <span class=\"hljs-string\">&quot;center&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">of<\/span>: <span class=\"hljs-string\">&quot;#targetElement&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#position2&quot;<\/span> ).position({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">my<\/span>: <span class=\"hljs-string\">&quot;left top&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">at<\/span>: <span class=\"hljs-string\">&quot;left top&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">of<\/span>: <span class=\"hljs-string\">&quot;#targetElement&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#position3&quot;<\/span> ).position({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">my<\/span>: <span class=\"hljs-string\">&quot;right center&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">at<\/span>: <span class=\"hljs-string\">&quot;right bottom&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">of<\/span>: <span class=\"hljs-string\">&quot;#targetElement&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).mousemove(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">&quot;#position4&quot;<\/span> ).position({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">my<\/span>: <span class=\"hljs-string\">&quot;left bottom&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">of<\/span>: event,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">offset<\/span>: <span class=\"hljs-string\">&quot;3 -3&quot;<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">collision<\/span>: <span class=\"hljs-string\">&quot;fit&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Position an element relative to another.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,6,5],"tags":[],"class_list":["post-52","post","type-post","status-publish","format-standard","hentry","category-overrides","category-methods","category-utilities"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/posts\/52\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.8\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}