Revision 1048326 of Reposition elements in the page

<div class="geckoVersionNote">New in Firefox 48</div>

<p>Starting in Firefox 48 you can move absolutely positioned elements by dragging them around the page.</p>

<p>{{EmbedYouTube("xZhKZKl_gCY")}}</p>

<p>That means, if an element has its <code>{{cssxref("position")}}</code> property set to <code>absolute</code>, <code>relative</code> or <code>fixed</code> and one or more of the {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} properties, the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">Box Model view</a> displays a button:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13078/inspector-reposition-button.png" style="display:block; height:395px; margin-left:auto; margin-right:auto; width:600px" /></p>

<p>If you click that button, two handles appear next to the element:</p>

<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display:block; height:215px; margin-left:auto; margin-right:auto; width:388px" /></p>

<p>You can use these handles to drag the element around the page.</p>

<p>If the element is absolutely positioned, dashed lines are shown representing the offset parent. For relatively positioned elements the dashed lines indicate the original position of the node. The offsets are indicated by a line and a tooltip for each side.</p>