CSS positioning issues.

Question

Hi! I'm trying to, of course, build something in HTML.

However, I am running into some serious issues with positioning!

I'm trying to get elements in the website to be centered, but I cannot do that without sacrificing (somehow) controls such as z-index, and width on those elements -- In some cases, vice versa.

Theoretically, I should be able to make something be centered, set it's width, AND set it's Z index all at once.

Can anyone help?

Answer 1

To center something, set it's margins to auto. To set an objects width, set it's width, to set an object's z-index, set it's position to relative to maintain it's centreness, and set it's z-index accordingly.

div {
    width:40%;
    position:relative;
    z-index:5;
    margin:auto;
    background-color: red;
}

Example: http://jsfiddle.net/wDzkd/