Z-Index wird keine relative Position einnehmen

Ich habe eine einfache HTML-Seite, wo ich eine zentrierte "dehnbare" Header haben. Ich möchte ein zentriertes Logo darauf haben. Ich verwende align = "center" im div-Tag, um die Zentrierung zu erreichen. Wenn ich den Z-Index auf dem Logo verwende, funktioniert es nur, wenn ich die Position ändere: relativ zur Position: absolut, wodurch die Zentrierung, die ich habe, unterbrochen wird. Ich teste es in Chrom 8.0.552.224 und FF 3.6.13Z-Index wird keine relative Position einnehmen

<!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>

Quelle

2011-01-09 Jack S.

ich dies in IE7 getestet habe, IE8, Firefox 3.6.13, Chrome dev (kein IE6!):

Live Demo
(ich hatte dumme Bilder zu verwenden, die tatsächlich vorhanden ist oder Sie können die Demo richtig in Firefox nicht anzeigen)

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}

Dies würde eine ganze Menge sauberer sein, wenn Sie CSS Hintergründe statt <img> in wenigen Orten nutzen könnten.

Quelle

2011-01-09 11:13:02 thirtydot

Ich wusste nicht, dass Sie text-align auf diese Weise verwenden können. Vielen Dank! –

Z-Index wird keine relative Position einnehmen

Antwort

Verwandte Themen