Relative positioning places an element in relation to where it would have been placed in a normal flow. To specify that an element should be relatively positioned, the value of relative is used with the position property and the top or bottom and the left or right properties are then used to specify the distance to place the element from where it would have been in a normal flow. Figures 12.3 and 12.4 show how these properties are used and the effect.
In the example, the p.moveRight{} rule moves the top edge and left edge of the second <p> element’s box lOpx down and 50px right, respectively, from where they would have been in a normal flow. If only the top or left offset is specified, the position for the normal flow is used for the other.
1. Specifying Offset for Logical Edges
The properties used to specify the logical offset of an element are offset- block-end, offset-block-start, offset-inline-end, and offset-inline-start and whether each defines top, bottom, left, or right offset depends on the value of the writing-mode property (discussed later in Chapter 14). They are non- inherited and take the same values as the top, bottom, left, or right properties already introduced earlier, which are length values (e.g., px and em), percentage values (%), and auto. Figure 12.5 shows how the properties are used. The code produces the same result as Figure 12.4. Given the set writing mode, offset-block-start means top and offset-inline- start means left.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.