Z-index Won't Work

2020-02-07 03:42发布

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?

标签: css z-index
3条回答
Lonely孤独者°
2楼-- · 2020-02-07 04:01

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>
查看更多
3楼-- · 2020-02-07 04:07

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.

查看更多
家丑人穷心不美
4楼-- · 2020-02-07 04:14

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

查看更多
登录 后发表回答