css layers ordering and arranging

Question

Hello,

I am trying to have one one layer, and center images within. I.E., if I have 3 images and want 3 links beneath them, is there a way to do this without using a separate div tag for each link and image? To automatically make the links be centered under the images, and the images to be spaced evenly within a layer?

I was also wondering how I would make the div show behind standard html if that is possible. I.E. if I have some text and a div over the text, the div will default show over the text, when I would like it to be behind. Is this only possible by using another layer?

Answer 1

Yes, you'll have to put a container element, such as a div, around each image and its caption to keep them together.

<div class="pictureBox">
    <div>
        <img />
        caption caption
    </div>
    <div>
        <img />
        more caption
    </div>
</div>
--------
.pictureBox div {
    text-align: center;
    /* whatever width/height/positioning you want */
}

for the second part of the question, regarding putting it behind the other text, take a look at CSS z-index, though I think that only applies to absolutely positioned elements.

Answer 2

nickf is right, z-index only applies to absolutely positioned elements.

You could make the containing element position:relative, then give both the image and link position:absolute to affect their stacking order.