Skip to content

Instantly share code, notes, and snippets.

@leifg
Created November 10, 2012 17:22
Show Gist options
  • Save leifg/4051813 to your computer and use it in GitHub Desktop.
Save leifg/4051813 to your computer and use it in GitHub Desktop.
fixed z-index positioning in newest webkit
<!-- should always be on top -->
<div class="wrapper">
<div class="overlay">
overlay
</div>
</div>
<!-- should always be in the back -->
<div class="main">
main
</div>
.main {
display: block;
top: 50px;
background-color: green;
width: 800px;
height: 200px;
position: relative;
z-index: 1;
}
.wrapper {
position: fixed;
}
.overlay {
left: 200px;
background-color: blue;
width: 200px;
height: 500px;
z-index: 1000;
position: absolute;
}
@leifg
Copy link
Author

leifg commented Nov 10, 2012

demonstrating the problem with the latest changes in z-index positioning in google chrome 23:

http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment