Relative Position of Div Layer

When the position propery of a div layer is set to relative, it will be aligned according to the following scenerios.

Case 1: Div Layer itself Set to Relative Position

When the position of a div layer is set to relative, the position of this div layer is relative to the HTML contents where it is inserted.

In this example, the div layer is created below line 3 of the HTML web contents.

div layer relative position example 1

Please click here to see this live example of div layer relative position.

Case 2: Div Layer itself Set to Relative Position with Position Property

In this case, the Top and Left position property are assigned to the div layer with relative position. The position of the div layer will be aligned according from where it is created.

div layer relative position example 2

Please click here to see this live example of div layer relative position.

Case 3: Div layer is contained inside a div layer with Relative Position

In this example, layer1 is contained inside a div layer with relative position (outerWrapper). In this situation, the position property will be aligned according to the top left corner of the outerWrapper div layer.

div layer relative position example 3

Please click here to see this live example of div layer absolute position.

HTML CSS Tutorial contents: Div layer position property - Relative Position.