Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1048324 of Reposition elements in the page

  • Revision slug: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
  • Revision title: Reposition elements in the page
  • Revision id: 1048324
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment

Revision Content
New in Firefox 48

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

That means, if an element has its {{cssxref("position")}} property set to absolute, relative or fixed and one or more of the {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} properties, the Box Model view displays a button:

 

, a button is shown besides the positioning value. Clicking that button enables inline editing of the element within the page.

Example for changing the position of an element within the content

The element's position can be changed by dragging the handles on the edges. 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.

{{EmbedYouTube("xZhKZKl_gCY")}}

Revision Source

 
<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>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>&nbsp;</p>

<p>, a button is shown besides the positioning value. Clicking that button enables inline editing of the element within the page.</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>The element's position can be changed by dragging the handles on the edges. 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>

<p>{{EmbedYouTube("xZhKZKl_gCY")}}</p>
Revert to this revision