test

 

the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties.

content content content content content content content content content

content content content content content content content content content

content content content content content content content content content

Note that the surrounding boxes above are positioned normally, including the collapsing of vertical margins,

Some, will display it in front siblings that preceed it in source order but behind siblings that follow.

Stacking order is detailed in the discussion on absolute positioning. But note that you can use the z-index style property to explicitly set the stacking order for relatively positioned elements.

 

If the relatively positioned element is a block element, it establishes a new containing block. Positioned elements within it will use the "offset" position of that element as a base for positioning. In other words, the offsets of

Some on an element's style to either left or right. Special rules apply to floated elements.

When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

The illustration below shows the result of code like the following, where a floated element is defined as part of inline text (margin, border and padding styles have been omitted for brevity).

<p>
  <span style="float:right;width:40%;">contentThe float property can be set to one of left, right, none or inherit