Today I’m going to discuss positioning. I will cover relative, absolute, and fixed positioning. These along with floating (as discussed in the last post) gives us 4 ways to position elements on a web page. These last 3, unlike floating, can result in overlapping elements as you will see. If this is what you want then no problems, otherwise you need to take care to avoid that situation.
As seen in the attachment for relative positioning, the element selected will be moved to a new position relative to the old position as defined by the position coordinates. The spot it originally occupied will remain vacant. It as if the program did not know the element had been moved.
With absolute positioning, as seen in the attachment, the element selected will be moved to a new position relative to it’s container (DIV tag in this case) as defined by the position coordinates. The spot it originally occupied is taken by those elements that originally followed the moved element.
With fixed positioning, as seen in the attachment, the selected element is moved to a new position relative to the browser window (not web page). It will remain in the same fixed position on the screen and will not move along as the window is scrolled. The web page may or may not fill the entire width of the browser window.
The dimensions of the element are established from specific width and length designations or the inherent dimensions of an element such as an image size or paragraph content. Therefore the new position can be determined by defining the coordinates of one of the four corners. See attachment.
In my next post I will go into the details of how the attached document was created.
What people are saying