Centering content AND overlapping images?

[7on]

Is it possible to have absolute positioning (z-indexed above one another) but have the whole thing be in the center of the page?

An example being here. Let's say I wanted to make the whole thing in the middle float in the middle of the page without losing the placement of the various elements?

 

[Trip.Tucker]

Create a container div and center that and set it to relative. Within, nest your object divs set as absolute and they will use the parent co-ords as a root point.

 

[7on]

Create a container div and center that and set it to relative. Within, nest your object divs set as absolute and they will use the parent co-ords as a root point.

Could I have an example? Thanks!

 

[angelwatt]

Could I have an example? Thanks!

I believe this is what Trip.Tucker was getting at.

<div id="absolute-container">
  <div id="stuff"></div>
</div>

CSS:

#absolute-container {
 position: relative;
 margin: 0 auto; /* this will center the div */
}
#stuff {
 position: absolute;
 top: /* whatever */
}

Something I've messed with, but haven't tested too much is to something like (using only the stuff div from above),

#stuff {
 position: absolute;
 left: 25%; right: 25%;
}

I know there's certain times this won't work at all, but other times it will work perfectly even in IE.

 

[7on]

I think I got it:

body {text-align: center;background-color: #E7E8EB;}
#container {margin-left: auto;margin-right: auto;width: 570px;text-align: left;position: relative;}