开发者

CSS z-index does not take effect

开发者 https://www.devze.com 2022-12-11 01:26 出处：网络

I expect with the following code \'max-button\' be visible but it hides behind the grid. What is wrong?

相关专题：css

I expect with the following code 'max-button' be visible but it hides behind the grid. What is wrong?

<html>
<head>
<title>Grid</title>
<style>
#sketch {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent url(grid.gif) repeat scroll 0 0;
    z-index: 0;
}
#max-button {
    z-index: 9999;
}
</style>
</head>
<body>
<div id="sketch"></div>
<div id="max-button"><img src="maximize.gif"></div>
</body>
</html>

And here are the two images:

maximize.gif: alt text http://www.fr开发者_如何学运维eeimagehosting.net/uploads/8c213c4a8a.gif grid.gif: alt text http://www.freeimagehosting.net/uploads/af716eaf7d.gif

#maxbutton needs to be absolutely positioned as well.

Explanation: the grid is taken out of the default document flow, hence the button is ending up underneath where the grid would have taken it. Absolute positioning enables z-index.