Z-index UL child element position behind header

Posted: June 28, 2013 in web
The trick is to use negative z-index with position: relative.
<html><head>
<style>
 body {
 background: #ccc;
 }
 #main {
 background: #f00;
 width: 400px;
 height: 100px;
 margin: 64px 0 0 0;
 }
 #sub {
 background: green;
 margin-top: 54px;
 position: relative;
 z-index: -1;
 }
 #header {
 background: yellow;
 height: 105px;
 }
</style>
</head>
<body>
<div id="header">
 <ul id="main">
    <li>main1
      <ul id="sub">
        <li>sub1</li>
        <li>sub2</li>
        <li>sub3</li>
      </ul>
   </li>
</ul>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s