Question

我有一个简单的html页面，我有一个居中的“弹性”标题。我想在它上面有一个居中的标志。我在div标签中使用align =“center”来实现居中。当我在徽标上使用z-index时，它不起作用，除非我改变位置：相对于position：absolute，这打破了我的中心。我正在测试它在chrome 8.0.552.224和FF 3.6.13

<!DOCTYPE html>
<html>
<head>
<title>Vassily's page!</title>
<style type="text/css">
* {margin:0; padding:0;}
table {border-collapse:collapse;}
body {background:white url("bg.png") top repeat-x fixed;}
#bar {opacity: .8;}
#bar_stretch {height:150px; width:55%;}
IMG#logo {position:relative; top:0px; z-index:10;}
</style>
</head>
<body>
<div align="center">
<img id="logo"  src="logo.png">
</div>
<div id="bar" align="center">
<img src="bar_left.png"><img src="bar_center.png" id="bar_stretch"><img       src="bar_right.png">
</div>
</body>
</html>

Answer 1

我在IE7，IE8，Firefox 3.6.13，Chrome开发者（没有IE6！）中进行了测试：

的 Live Demo
（我不得不使用实际存在的愚蠢图像，或者你无法在Firefox中正确查看演示）

<强> HTML：

<div id="logocontainer"><img id="logo" src="logo.png" /></div> <div id="bar"> <img src="bar_left.png" /><img src="bar_center.png" id="bar_stretch" /><img src="bar_right.png" /> </div>

<强> CSS：

* {margin:0; padding:0} table {border-collapse:collapse} body {background:white url("bg.png") top repeat-x fixed} #bar {opacity: .8; text-align:center} #bar_stretch {height:150px; width:55%} #logocontainer {width:100%; position:absolute; text-align:center; z-index:1} #logo {margin-top:30px; width:123px; height:72px}

如果你可以在一些地方使用CSS背景而不是<img>，那将会更加清晰。

z-index不会占据相对位置

1 个答案: