Z-index Won't Work | 易学教程

问题

Possible Duplicate:
Css z-index problem

I have an issue where one image is infront of another and z-index doesnt seem to change it. I am trying to make it so the logo is on top of the gray bars image.

http://jsfiddle.net/vzPUw/

Can anyone explain to me why this is not working?

回答1:

z-index only works with position : relative/absolute/fixed so give position:relative to your logo.

http://jsfiddle.net/vzPUw/1/

Updated

http://jsfiddle.net/vzPUw/3/

In this, I changed in the markup because we never put block element inside an inline element. <a> is an inline element & h1 is a block element.

回答2:

z-index:0; isn't a good value to use. You should use 1 as a minimum. 1 is the window base. 0 is technically below the window.

You simply need to call the right element (the anchor not the image within it) since the anchor is the container. Then it's a matter of margins and position for placement.

jsFiddle Here

回答3:

see here i have change here... -remove img tag for bar image and put background of header tag.. :) -here i think you no need for position property and z-index.. :)

<html>
<head>
    <title>Ankur Patel</title>
</head>
<body style="width: 100%">
<header style="background-image: url('http://dl.dropbox.com/u/14080718/Final/images/bars.gif');background-repeat: repeat-x;">

    <a>
        <img alt="" src="http://dl.dropbox.com/u/14080718/Final/images/rocketdesign.png">
    </a>
    </header>
</body>
</html>

来源：https://stackoverflow.com/questions/9108696/z-index-wont-work

标签

css

z-index