This container box is the size of a web page suitable for a 800 x 600 monitor. In its associated CSS style, its size has been defined (760px x 490px) and its left and right margins have been set to "auto" to make it center in a browser window. Its Position value has been set to "relative".
This layer has been positioned with "absolute" positioning values (top = 100px, left = 50px) in its associated CSS style, but because it is nested within the Container box <div> its position is effectively relative. ie it moves with the Container box when you re-size the browser window.
This layer has been positioned with "absolute" positioning values (top = 115px, left = 500px) in its associated CSS style, but because it is NOT nested within the Container box <div> its position stays fixed relative to the top and left of the browser window. ie it will NOT move with the Container box when you re-size the browser window.
This example demonstrates positioning layers with absolute and relative positioning.
This box is a Layer (not nested in the Container box <div>), but positioned with absolute values just like Layer Box 2.
TIP: Try re-sizing the browser window.
The CCS styles for this page are located in the <head> tag of this page, so just view the page source code to see what's going on.