There are four types of Position elements - Static, Fixed, Absolute and Relative
Relative
positions the element relative to the outer element. For example - if an object has a relative position 100 px left inside a container that is center aligned on a web page it will float with the centered object.
Absolute
positions the element in an x/y coordinate on the page...will not move with browser resize - does not work well with a fluid layout (center aligned)
fix it with an absolute position with the outer container set to relative position. Go figure?!!
Can control elements to appear in exact locations...not the best for mobile
Creates a rectangle object that can now be physically moved around the page in design view
#rectangle {
width: 150px;
height: 100px;
position: absolute;
top: 54px;
left: 152px
}
Creates an absolute positioned object which means that it will not move regardless of how the browser is expanded
How can you use it so that it will always remain in the same relationship with your layout?
Create a container div that has a relative position style
Put the AP div code inside that that div. It will now position in a relative position to the outer div...even outside the container