z-index не займет относительную позицию - PullRequest
Новая
       27

z-index не займет относительную позицию

0 голосов
/ 09 января 2011

У меня есть простая HTML-страница, где у меня есть центрированный "эластичный" заголовок. Я хочу иметь логотип по центру сверху. Я использую align = "center" в теге div для достижения центрирования. Когда я использую z-index на логотипе, он не работает, пока я не изменю положение: относительно положения: абсолютное, что нарушает центрирование, которое у меня есть. Я тестирую его в 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>

1 Ответ

2 голосов
/ 09 января 2011

Я проверял это в IE7, IE8, Firefox 3.6.13, Chrome dev (без 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> в нескольких местах.

...