• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 190
  • Last Modified:

Help with z-index

I have a sliding element on my page, that I want to slide down from under another element.


On the above page the blue box should be under the white element and the logo. I set z-index on both items, but it seems to have no effect.

Can someone tell me what I'm doing wrong?

1 Solution
Try making the z-index on .blue-dropdown a negative number.  I set it to -1 and it looks great.  You'll probably want to make the top of your .top-menu item a bit higher, too.  But I'm sure you'll see that once you get the z-index worked out.
@charset "utf-8";
body {
    background-color: #d9e0e6;
    padding: 0;
    margin: 0;

.centered {
    margin: 0 auto 0 auto;
    width: 841px;
    height: 125px;
    background-image: url(../images/head-wrap.png);
    z-index: 100;

.logo {
    float: left;
    height: 60px;
    width: 168px;
    z-index: 200;
    margin-top: 18px;
    margin-left: 30px;
.top-menu {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #00aeef;
    float: right;
    margin-top: 42px;
    margin-right: 50px;
    font-family: Lato, sans-serif;
    font-size: 12px;
    color: #00aeef;
    height: 18px;
    position: relative;
    top: -125px;
    clip: rect(-100px,auto,auto,auto);
.blue-dropdown {
    background-image: url(../images/blue-dropdown.png);
    height: 150px;
    width: 820px;
    z-index: -1;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: none;

.top-menu a:link {
    color: #00aeef; 

.top-menu a:visited {
    color: #00aeef; 

.top-menu a:hover {
    color: #002d56; 

.topmenu-item-first {
    float: none;
    display: inline;
    margin-right: 70px;
    margin-left: 10px;
.topmenu-item {
    float: none;
    display: inline;
    margin-right: 70px;
.topmenu-item-last {
    padding-left: 0px;
    float: none;
    margin-right: 10px;

Open in new window

elliottbenzleAuthor Commented:
Thanks! that worked

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now