HTML CSS Div Layer Tutorials | Affordable Web Hosting Home

Static Position of Div Layer

The default position of a div layer newly created is static. A static position means that the position of the div layer appear where you create it. Moreover as it's name implied, the position of a static div layer is always static. The following examples will demonstrate that.

Case 1: Div Layer itself Set to Static Position

When the position of a div layer is set to static, the position of this div layer is relative to the HTML contents where it is inserted. Please note that the default position of all div layers are static.

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

div layer static position example 1

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

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

In this case, the Top and Left position property are assigned to the div layer with static position. However the position of the div layer is still align at the same location where it is created. In other words, the position property has no any effect on div layer with static position.

div layer static position example 2

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

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

Let's do one more example with the static div layer. In this example, layer1 is contained inside a div layer with relative position (outerWrapper) and setting the top and left position property. You can see that the position property has no any effect on div layer with static position.

div layer static position example 3

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

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

how to improve Google Page Rank