Page 1 of 3 A short article, Absolute Positioning and the Top Property, should be read first as an introduction to this subject matter. While that earlier article covers some basics, the full use of "auto-positioning", as we'll call it, is complex enough to justify a series of its own, of which what you are now reading is the first part.
In our earlier article we talked a lot about the top property and how it behaves when its value is set to "auto," but we did not discuss another commonly-used property that applies to absolutely positioned (AP) elements, specifically the left property. While the top property controls vertical placement of AP (and fixed position) elements, the left property controls horizontal placement.
These two properties are usually given stated length values to place absolutely positioned elements in relation to a positioned ancestor (parent) element. For that function they work quite well, even in Internet Explorer for Windows. The Top Property article shows that an auto value for top will let an AP element choose its vertical placement based on where it would have displayed, were it a simple flowed static element. The W3C specifications say that the left property should behave the same way as the top property, but is there any real use for that ability? We're here to say that yes, there is.
Imagine you have a large data table that fills the page, and you would like an AP box to be placed in front of and also be visually associated with a cell (TD) in the center of the table somewhere. The specifications say that you can simply insert that AP element into a table cell and allow its top and left properties to remain at the initial (default) value of auto. A non-positioned static box would be displayed in the upper left corner of the cell, so that is where the specifications say our auto-positioned AP box should display too. If the cell has any padding, we would expect the AP box to display inside the inner edge of the cell padding, since that's where a static box would display.
The left and top properties operate independently, even when one or both have the value auto. The left property works only along the horizontal axis and top property works only along the vertical axis. Thus, one of them can be a length value while the other is set to auto. This CSS feature allows much more flexibility when applying auto-positioning to an absolute or fixed position element. The topic will be more thoroughly examined in the second part of the series.
So let's set up a simple test and see what actually does happen in real browsers under these
conditions. Demo 1 starts with a basic DIV that will serve as a generic
container for the AP test box. This parent box will be displayed at an arbitrary article page
location, much like a randomly chosen table cell might.
Note: All
demos below are live code tests.
Demo 1
Note that this parent box has a position value of relative, allowing it to become a positioned base for the absolute child element we'll be placing inside. Now let's clear the content out of the parent box, prop it open with a CSS height declaration, and bring in an AP element:
Demo 2
We have to give the parent box a height to hold it open because an absolute child element does not actually reside inside the parent box. However, it does take its screen location from that positioned parent element. The AP box is on its own unique z-index level and does not interact with other screen elements, except possibly to overlap or underlap them.
You can see in Demo 2 that the AP box snuggles nicely against the parent box border as it should. The specifications require the zero values for top and left in this case to place the outer border edge of the AP box against the inner border edge of the parent box.
Notice how the AP box ignores the 5px padding on the parent. The zero point is defined as the dividing line between any border and padding on the parent box.
So far so good. This even works correctly all the way back to IE5/Win, at least when only left and top are used. From this starting position we are free to modify the zero values on left and top to drag the AP box all over the screen if desired. Alternately, we might use negative margins to accomplish the same thing. It's very handy to have two different methods to move the AP box, as we shall see in Part Two of this series.
Pre-IE7/Win browsers do have bugs when the right and bottom properties are set to values other than the default auto value on a positioned box that has no defined dimensions.
It would be lots of fun making our AP box demo move around and change z-index levels at this time, but that stuff is very straightforward and bug-free, and this article is about auto-positioning. So it's time to get rid of the length values on the left and top properties entirely and see what the auto value can do for us.
Keywords
CSS, absolute positioning, fixed positioning, AP, top property, left property, negative margins, auto-positioning, z-index
